如何从 reactstrap 输入覆盖表单控制类？

Question

我有一个 reactstrap 输入，但我遇到以下问题： 我需要覆盖 .form-control 类或禁用它，否则我的样式来自 styles.module.scss 不会应用。我怎样才能做到这一点？ 我尝试了不同的特异性解决方案，但我无法克服 .form-control 类.. 因为我认为它是最后计算的并覆盖了我所有的样式。如果我放置内联样式，没关系，我的样式被应用了，但这不是一个好的做法，所以我需要找到一个解决方案来应用我的 style.module.scss 中的样式。 有什么想法吗？

<Input
  style={{
    fontSize: '18px',
    backgroundColor: 'ffffff',
    boxShadow: 'none',
    outline: 'none'
    }}
  type={'textarea'}
  id="clientInfo"
  name="clientInfo"
  defaultValue={formatValue(value)}
/>

Answer 1

您可以使用!important 关键字将您的自定义样式应用到.form-control 类中。

您的输入字段：

<Input
  className='form-control'
  type={'textarea'}
  id="clientInfo"
  name="clientInfo"
  defaultValue={formatValue(value)}
/>

您的 CSS 文件：

 .form-control {
    fontSize: 18px !important;
    backgroundColor: #ffffff !important;
    boxShadow: none !important;
    outline: none !important;
    }