React CSS組件中未顯示SCSS效果

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;

Answer 2

button.scss在哪里？ 如果它與ButtonFilled.jsx處於同一文件夾，則我看不到任何錯誤。 否則，將路徑更改為正確的路徑，請注意。 在“ ./button.scss”中表示當前文件夾。 使用css的其他方法就是導入css，例如import'./button.scss'; （確保其正確的路徑）。 並在您的jsx className =“ buttonFilled”上