Question

我使用“ npx create-react-app my-app”创建了一个演示react应用。当我尝试将样式应用于React组件时，什么都没有发生，但是当我将其应用于诸如<div或<p>之类的常规HTML标签时，它就可以工作。我不为什么。

我还尝试将:local添加到css文件中，例如：: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样式，但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>
            )
       }
 }

Answer 2

我使用以下样式：

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>
            )
       }
 }

我期望它可以工作，但是我更喜欢将样式分配给每个组件，当我在组件层次结构中大量传递样式时，它为开发人员增加了我的困惑。我希望这会有所帮助。

Answer 3

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

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

3 个答案: