React中组件style不支持important的解决方案
在使用React开发的过程中，发现在组件的style中设置important会被直接忽略，渲染出的页面直接不会有对应的属性。
问题
具体情况是，在组件的style中设置!important，渲染的时候，!important会被忽略掉。比如：
<a style={{ color: '#fff !important' }}>React组件Style设置!important</a>渲染时的节点如下：
<a>React组件Style设置!important</a>如果在style中有其他属性，其他属性还是能生效的。
<a style={{ color: '#fff !important', background: '#fff' }} >
React组件Style设置!important
</a>渲染时的节点保留了其他属性：
<a style="background: rgb(255, 255, 255);">React组件Style设置!important</a>解决方案
因为 React 通过 JavaScript 对象的方式处理样式，而不是直接插入 CSS 代码。important 关键字是 CSS 的语法，不是 JavaScript 对象的属性，因此不能在 React 的 style 属性中直接使用。
遇到这种需要使用!important时（如需要覆盖掉默认的!important），可以使用下面几种方案：
- 在 CSS 中定义
- 使用 style 对象中的 cssText 属性
- 使用 CSS-in-JS 库，如：styled-components
- ref 直接操作 DOM
在 CSS 中定义
我们可以通过新增一个class或id等选择器，在CSS中设置!important。 如果是需要覆盖掉之前的!important，则需要优先级更高的选择器。
组件如下：
<a className={styles.important} >React组件Style设置!important</a>样式如下：
/* 这个是设置的全局的 */
a {
color: var(--theme-color) !important;
}
/* 这个要单独设置，覆盖掉全局设置 */
.important {
color: #fff !important;
}渲染节点如下：
<a class="important___spt12">React组件Style设置!important</a>.important___spt12 {
color: #fff !important;
}
a {
/* 如下这个是被覆盖掉的，在浏览器里面看是有删除线 */
color: var(--theme-color) !important;
}使用 style 对象中的 cssText 属性
我们可以使用cssText属性，以字符串的形式制定样式，这样就可以使用!important了。
<a
style={{
cssText: "color: #fff !important;",
}}
>
React组件Style设置!important
</a>使用 CSS-in-JS 库
一些CSS-in-JS库也可以方便的使用!important，比如styled-components。
import styled from 'styled-components';
const ImportantDiv = styled.div`
color: #fff !important;
`;
<ImportantDiv>Hello World</ImportantDiv>通过ref 直接操作 DOM 设置属性
具体设置如下：
<a
ref={(node) => {
if (node) {
node.style.setProperty('color', '#fff', 'important')
}
}}
>
React组件Style设置!important
</a>渲染结果如下：
<a style="color: rgb(255, 255, 255) !important;">React组件Style设置!important</a>总结
上面几种方案都可以实现我们覆盖掉默认!important的需求，每个方案都有自己的优缺点，可以根据具体的需求选择合适的方案。如果用的地方比较少，我觉得使用 style 对象中的 cssText 属性和通过ref 直接操作 DOM 设置属性是比较合适的。