javascript - 代码无法在React应用程序中选择CSS文件

Question

我将buttn.css和button.js保存在我的react应用程序中的同一文件夹中。但是css没有渲染。

按钮.css

.Button {
    background-color: transparent;
    border: none;
    color: white;
    outline: none;
    cursor: pointer;
    font: inherit;
    padding: 10px;
    margin: 10px;
    font-weight: bold;
}

.Button:first-of-type {
    margin-left: 0;
    padding-left: 0;
}

.Success {
    color: #5C9210;
}

.Danger {
    color: #944317;
}

按钮.js

import React from 'react';
import classes from './Button.css';
const Button = (props) => (
  <button
  className={[classes.Button,classes[props.btnType]].join(' ')}
  onClick={props.clicked}>{props.children}</button>
);

export default Button;

请建议如何继续，而无需为所有元素制作通用的 CSS 表。

Answer 1

如果您使用create-react-app你的CSS文件should be named Button.module.css .