如何將 !important 添加到 CSS-in-JS (JSS) 類屬性中？

Question

我正在嘗試將此答案中的一些 CSS-in-JS 類與我的 React 項目中的材質 UI 組件一起使用。 我需要覆蓋來自 Bootstrap 的 CSS，所以我想使用 !important 修飾符，我之前只在 .css 文件中使用過它，我不確定如何在 CSS-in-JS 中做到這一點。 我要傳遞到 Material-UI withStyles函數的樣式對象如下所示，如何將 !important 添加到 fontSize 屬性？ 我已經嘗試了30 !important和其他一些東西，但似乎沒有任何效果。

謝謝

const styles = {
  labelRoot: {
    fontSize: 30
  }
}

Answer 1

正如 Adrian 指出的那樣，您不需要這樣做，但如果您絕對需要這樣做，您可以將其設置為字符串：

const styles = {
  labelRoot: {
    fontSize: '30px !important',
  },
};

Answer 2

您可以對空格和逗號分隔值使用基於數組的語法。

只需這樣做：

const styles = {
  labelRoot: {
    fontSize: [[30], '!important'],
    margin: [[5, 10], '!important']
  }
}

Answer 3

您可以使用與在 css 中相同的內聯方式設置!important樣式。

在下面的例子中，兩個 div 在 css 中都是blue !important

 div { width: 200px; height: 200px; background: blue !important; flex:1; } section{display:flex;}

 <section> <div style="background: red;"></div> <div style="background: pink !important;"></div> </section>