如何将 CSS 样式应用于自定义 React 组件

Question

我用'npx create-react-app my-app'创建了一个演示反应应用程序。当我尝试将样式应用于 React 组件时，没有任何反应，但是当我将其应用于普通的 HTML 标签(如<div或<p>(时，它可以工作。我不知道为什么。

我还尝试在 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;
}

Answer 1

Css 样式应用于 react 中的 JSX 元素，但不应用于组件

应用 css 样式的错误方式，但类名仍然是组件的有效道具。您可以使用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>
)
}
}

Answer 2

我使用以下样式：

import styles from 'yourstyles.css'
...
class TakenFrame extends React.Component {
render(){
return(
<div className={styles.classNameDeclaredInCssFile}>
</div>
)
}
}

你的样式.css文件应如下所示：

.classNameDeclaredInCssFile{
//... your styles here
}

在您的情况下，您只需将一个名为"className"的属性传递给您的组件，但不使用它。在您的组件中，如果您执行以下操作：

class TakenFrame extends React.Component {
render(){
return(
<div className={this.props.className}>
</div>
)
}
}

我希望它会起作用，但我更喜欢将我的样式分配给每个组件，当我在组件层次结构中传递样式时，我发现它给我作为开发人员增加了混乱。我希望这有所帮助。

Answer 3

您也可以使用样式化的组件。请参考 https://glamorous.rocks/basics