Question

我正在使用React创建一些按钮和CSS来设置样式主题。所以我创建了一个Button类：

export default class Button extends React.Component{
  public className: string;

    constructor(props){
      super(props);
      this.className = props.className ? props.className : "";
    }

    public render() {
      return (
        <button className = {this.className}>
          {this.value}
        </button>
      );
    }
  }

这是我的CSS：

.my-css {
    width: 300px;
    height: 200px;
    border-radius: 8px;
}

这就是我的用法：

<Button className = "my-css" value = "Test" />

为什么在检查器中我看不到我的规则？

感谢谁能回答我！：-）

Answer 1

您应该在render函数中直接引用道具：

export default class Button extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <button className={this.props.className}> 
        {this.props.value}
      </button>
    );
  }
}

Answer 2

您是否已加载css文件。我认为您忘记了包含CSS文件。您可以在主索引文件中通过编写import'css文件的路径'来实现。如果确实加载了CSS，则可以更新以下代码。

enter code here
export default class Button extends React.Component {
    constructor(props) {
        super(props);
   }

public render() {
   const { class = '', value = ''} = this.props;
   return (
       <button className={class}> 
           {value}
       </button>
   );
}
}

Answer 3

解决方案1： 您可以在类中创建一个对象，并像这样影响CSS

const myCss = {
 'width': '300px',
 'height': '200px',
 'borderRaduis': '8px'
};

像这样将这个对象影响到您的按钮标签

<button style={myCss} />

解决方案2

在CSS文件中创建CSS样式
将CSS文件导入JS文件import classes from 'your-file-location.css'
在课程<button className={classes.my-css} />上设置按钮的样式

React不应用CSS规则

3 个答案: