对don'作出反应；不应用CSS规则

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

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

我就是这样使用它的：

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

为什么在检查员中我看不到我的规则加载

---

谢谢所有回答我的人！：-）

您应该直接在

render

功能中参考您的道具：

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

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

导出默认类按钮扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{this.props.value}
);
}
}

您是否加载了css文件。我想你忘了包括css文件。您可以在主索引文件中通过编写导入“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>
   );
}
}

在此处输入代码
导出默认类按钮扩展React.Component{
建造师（道具）{
超级（道具）；
}
公共渲染（）{
const{class=''，value=''}=this.props；
返回(
{value}
);
}
}

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

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

<button style={myCss} />

并将此对象影响到按钮标记，如下所示

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

<button style={myCss} />

解决方案2

• 在CSS文件中创建CSS样式
• 导入JS文件中的CSS文件

  从“your file location.CSS”导入类

• 根据您的班级设置按钮样式

---

我已经完成了解决方案2第3部分的2部分。。。因此，我遵循了这一点，它起了作用。真的谢谢！这是我第一次尝试。。。但我不知道为什么这个。道具没有类名。