Reactjs 不将类名样式应用于按钮的反应

我从React开始，只是想设计一个按钮。但它忽略了样式。我不确定我是否丢失了一个包，或者我是否做了一些非常简单的错误的事情

我的App.js文件

import React from 'react';
import Transactions from './Components/Transactions';

const App = props => {
  return (
  <div><Transactions /></div>
  );
}

export default App;

编辑1 虽然我可以通过在button.js文件中进行以下修改来实现这一点，但我寻求使用CSS模块的方法。我使用CreateReact应用程序来创建应用程序，但我想我肯定错过了其他东西。我需要弹出应用程序吗？我是否缺少导入库

import React from 'react';
import './button.css';


const button = (props) => (
    <button
        className={"Button"}>{props.caption}
    </button>
);

export default button;

从“React”导入React；
导入“./button.css”；
常量按钮=（道具）=>(
{props.caption}
);
导出默认按钮；

我想这取决于您的导入和文件名。CSS模块遵循

{component}.module.CSS

命名约定。因此，您可以尝试：

将

button.css

重命名为

button.module.css

从“./button.module.css”导入样式

在类名中使用

style.Button

---

请参阅：

刚设置的

className=“Button”

和

导入/Button.css的可能重复项。

@Rikin-我没有收到错误，如果我尝试调试页面并手动添加类（即通过Chrome中的F12命令），它将起作用。@George-className=“Button”无法工作，因为它必须来自类。按钮，因为它是作为名称导入的。该示例显示了cssConsole.log类的导入，并查看您得到了什么。我回顾了我的React类并查看了一些链接，刚刚发现了这一点。你的答案很完美。

import React from 'react';
import classes from './button.css';


const button = (props) => (
    <button
        className={classes.Button}>{props.caption}
    </button>
);

export default button;

.Button {
    font-size: 24pt;
    background-color: purple;
    color: white;
    width: 150px;
    border-radius: 8px;
}

import React from 'react';
import './button.css';


const button = (props) => (
    <button
        className={"Button"}>{props.caption}
    </button>
);

export default button;