Question

我从React开始，只是在尝试设置按钮的样式。虽然它忽略了样式。我不确定我是否缺少包裹或我是否在错误地进行简单的操作。

我的App.js文件

r0, r1, r2, and mutant

我的Transactions.js文件

cross_indxs

我的button.js文件

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

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

export default App;

我的button.css文件（button.js和button.css都位于src下的button文件夹中）

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

const Transactions = (props) => {
    return (
        <Button caption='blah'></Button>
    );
};

export default Transactions;

编辑1 虽然可以通过在button.js文件中进行以下修改来使此工作正常进行，但我尝试使用CSS模块方法。我使用create-react-app来创建应用程序，但认为我一定会遗漏其他东西。我需要弹出应用程序吗？我是否缺少导入库？

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


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

export default button;

Answer 1

我认为这是在您的导入和文件名上。 CSS模块遵循{component}.module.css命名约定。因此，您可以尝试：

将button.css重命名为button.module.css
import styles from './button.module.css
在班级名称中使用styles.Button

请参阅：CSS Modules

反应不将className样式应用于按钮

1 个答案: