[英]How to apply CSS style to custom React component
我使用“ npx create-react-app my-app”创建了一个演示react应用。 当我尝试将样式应用于React组件时,什么都没有发生,但是当我将其应用于诸如<div
或<p>
的常规HTML标签时,它就可以工作。 我不为什么。
我也尝试在CSS文件中添加:local
,例如:local(.taken-frame)
// index.js =================
import './style.css';
ReactDOM.render(
<TakenFrame className="taken-frame"/>,
document.getElementById('root')
);
// style.css ===============
.taken-frame{
color: blue;
}
CSS样式应用于react中的JSX元素,但不应用于组件
应用CSS样式的方法错误,但是className仍然是组件的有效支持。 您可以使用this.props.className进行访问,并以className的形式传递给div,就像我在正确的示例中提到的那样
<TakenFrame className="taken-frame" />
应用CSS样式的正确方法
class TakenFrame extends React.Component {
render(){
return(
<div className="taken-frame">
</div>
//OR
<div className={this.props.className}>
</div>
)
}
}
我使用以下样式:
import styles from 'yourstyles.css'
...
class TakenFrame extends React.Component {
render(){
return(
<div className={styles.classNameDeclaredInCssFile}>
</div>
)
}
}
yourstyles.css文件应类似于:
.classNameDeclaredInCssFile{
//... your styles here
}
在您的情况下,您只是将一个名为“ className”的属性传递给您的组件,而没有使用它。 在组件中,如果您执行了以下操作:
class TakenFrame extends React.Component {
render(){
return(
<div className={this.props.className}>
</div>
)
}
}
我期望它会工作,但是我更喜欢将样式分配给每个组件,当我在组件层次结构中大量传递样式时,它为开发人员增加了我的困惑。 我希望这有帮助。
您也可以使用样式化的组件。 请参考https://glamorous.rocks/basics
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.