javascript - SCSS 效果未显示在 React jsx 组件中

Question

我正在尝试设置 React 组件的样式，但看不到效果。没有任何错误，只是没有样式。

ButtonFilled.jsx(我的 React 组件)

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

class ButtonFilled extends React.Component {
   render() {

      return (

          <div>
         <button className = {css.buttonFilled}>
            Learn More
         </button>
          </div>
      );
   }
}
   export default ButtonFilled;

button.scss(我的样式表)

@import "base.scss";
.buttonFilled{
     font-size: 24;
     color: '#6D0839';
     font-weight: "bold";
     background-color: '#FFFFFF';
     padding-top: 17;
     padding-bottom: 22;
     padding-left: 15;
     padding-right: 15;
     width: 203;
     border-radius: 5;
     border-color: '#FFFFFF';
  }  

为什么会这样？我没有正确指定类名吗？

Answer 1

尝试以这种方式导入它。

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

class ButtonFilled extends React.Component {
   render() {
      return (
          <div>
            <button className = "buttonFilled">
              Learn More
            </button>
          </div>
      );
   }
}

export default ButtonFilled;