如何從 reactstrap 輸入覆蓋表單控制類？ (How can I override form-control class from a reactstrap input?)

問題描述

如何從 reactstrap 輸入覆蓋表單控制類？ (How can I override form‑control class from a reactstrap input?)

我有一個 reactstrap 輸入並且我有以下問題：我需要覆蓋 .form‑control 類或禁用它，否則我的樣式來自 styles.module.scss 不會應用。我怎樣才能做到這一點？我嘗試了不同的特異性解決方案，但我無法克服 .form‑control 類。因為我認為它是最後計算的並覆蓋了我所有的樣式。如果我放置內聯樣式，沒關係，我的樣式被應用了，但這不是一個好的做法，所以我需要找到一個解決方案來應用我的樣式從 styles.module.scss。有什麼想法嗎？

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

參考解法

方法 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;
    }

(by Cristocel21、Yagnur Tetikcan)

參考文件

1. How can I override form‑control class from a reactstrap input? (CC BY‑SA 2.5/3.0/4.0)