REACT 样式问题答案

【问题标题】：REACT Styling IssueREACT 样式问题
【发布时间】：2021-03-11 04:25:06
【问题描述】：

我正在编写一个 REACT 应用程序，它是一个使用 SASS 的 SharePoint 在线应用程序。我用来生成应用程序的向导创建了一个导入 Microsoft Fabric 的 SASS 文件。该文件名为“PaymentForm.module.scss”。我可以在那里调整向导创建的样式，并且效果很好。但是，当我尝试向文件添加自定义样式/类时，它不起作用。例如，当我更改 .container 样式时，它会反映在应用程序中。但是，我添加了一个“帮助块样式并将其添加到 txs 文件中。这不起作用：

.PaymentForm {
  .container {
    max-width: 700px;
    margin: 0px auto;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
  }
  .help-block {
    color: #e6003e;
  }

          <div className="help-block">
            Name on Card is required
          </div>

当我从浏览器检查源代码时。我注意到的一件事是通过向导生成的类名周围没有单引号。我创建的课程确实如此，所以我认为这就是它不起作用的原因：

require("./PaymentForm.module.css");
const styles = {
  PaymentForm: 'PaymentForm_25a72c53',
  container: 'container_25a72c53',
  'help-block': 'help-block_25a72c53',
  'ms-u-sm3': 'ms-u-sm3_25a72c53',
  'css-yk16xz-control': 'css-yk16xz-control_25a72c53',
  row: 'row_25a72c53',
  column: 'column_25a72c53',
  'ms-Grid': 'ms-Grid_25a72c53',
  title: 'title_25a72c53',
  subTitle: 'subTitle_25a72c53',
  description: 'description_25a72c53',
  button: 'button_25a72c53',
  label: 'label_25a72c53',
  'Select-control': 'Select-control_25a72c53'
};

我不确定我做错了什么。任何帮助表示赞赏

【问题讨论】：

标签： reactjs sass

【解决方案1】：

我必须在我的 tsx 中引用样式，例如：

卡上姓名为必填项

【讨论】：