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

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

仅将 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;