Question

如何使用来自不同文件的CSS设置React应用的样式？此代码不起作用吗？

Button.css

.Button {
  cursor: pointer;
  margin-left: 5px;
  margin-bottom: 15px;
  background-color: aquamarine;
}

Button.js

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

const button = (props) => (
<div>
    <button className={classes.Button}>Click ca să dai muie</button>
</div>
);

export default button;

<Button />组件在有状态组件中被调用。

PS：我正在使用create-react-app v2和React 16.8.6

Answer 1

在external css file上从react component应用样式，您应该执行以下操作：

像这样导入css文件：

import './Button.css';

样式文件：

.Button {
      cursor: pointer;
      margin-left: 5px;
      margin-bottom: 15px;
      background-color: aquamarine;
    }

您的组件文件：

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

    const Button = (props) => (
    <div>
        <button className="Button">Click ca să dai muie</button>
    </div>
    );

    export default Button;

Answer 2

仅将CSS导入组件。并将样式用作Strings。

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

const button = (props) => (
<div>
    <button className="Button">Click ca să dai muie</button>
</div>
);

export default button;

Answer 3

create-react-app requires，您将拥有CSS Modules格式为[name].module.css的文件。

create-react-app中的摘录弹出config/webpack.config.js：

默认情况下，我们支持扩展名为.module.css
的CSS模块。

因此，如果您想继续使用CSS模块，则应将css文件的名称更改为 Button.module.css 。

为什么我的CSS样式不适用于页面？

3 个答案: