css - 如何将 !important 添加到 React 内联 CSS 样式中

Question

如何添加!important到我的内联 CSS 属性中？如果我在它之后添加2px它只是忽略整个样式。

import React from "react";

export default class Todo extends React.Component {
    render() {
        const {text} = this.props;

        const cardStyles = {
            borderWidth: '2px'
        };

        return (
            <div class="card mb-2 border" style={cardStyles}>
                <div class="card-body">
                    <h5 class="card-title m-0">{text}</h5>
                </div>
            </div>
        )
    }
}

标签： cssreactjs

Answer 1

显然不支持https://github.com/facebook/react/issues/1881#issuecomment-262257503

同时你可以使用 hack 做：

        <div ref={element => { 
             if (element) element.style.setProperty('border', '2px', 'important'); 
           }}
        />