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

Question

I have a reactstrap Input and I have the following issue: I need to override.form-control class or disable it, because otherwise my styles from styles.module.scss are not applied. How can I achieve this? I tried different specificity solutions but I can't get over.form-control class.. because I think it's computed last and overrides all my styles. If I put inline styles, it's ok, my styles are applied but this is not good practice, so I need to find a solution to apply my style from styles.module.scss. Any ideas?

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

Answer 1

You can use !important keyword to apply your custom style into .form-control class.

Your input field:

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

Your CSS file:

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