代码之家 › 专栏 › 技术社区 › Seagull

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

reactjs css javascript

Seagull · 技术社区 · 6 年前

我用“npx create react app my app”创建了一个演示react app。当我尝试将样式应用于React组件时,什么也没有发生,但是当我将它应用于一个普通的HTML标记时,比如 <div 或 <p> 它起作用了。我不知道为什么。

我还尝试添加 :local :local(.taken-frame)

// index.js =================        
import './style.css';


ReactDOM.render(
  <TakenFrame className="taken-frame"/>,
  document.getElementById('root')
);


// style.css ===============
.taken-frame{
  color: blue;
}

3 回复 | 直到 6 年前

Hemadri Dasari 6 年前

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

应用css样式的方法是错误的,但是className仍然是组件的有效支持。您可以使用this.props.className访问它,并将其作为类名传递给div,就像我在right way示例中提到的那样

<TakenFrame className="taken-frame" />

 class TakenFrame extends React.Component {
       render(){
            return(
                <div className="taken-frame">

                </div>
                 //OR
               <div className={this.props.className}>

                </div>
            )
       }
 }

Anthony Cregan 6 年前

我使用以下样式:

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