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相同的文件夹我没有看到任何错误。否则将路径更改为正确的路径，请注意。在＆＃39; ./ button.scss＆＃39;表示当前文件夹。使用css的其他方法只是导入像 import'./button.scss';这样的css（确保它是正确的路径）。并在你的jsx className =＆＃34; buttonFilled＆＃34;

在React jsx组件

2 个答案: