How to add !important into React inline CSS style

Question

How to add !important into my inline CSS property? If I add it after 2px it just ignore whole style.

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>
        )
    }
}

Answer 1

Apparently it is not supported https://github.com/facebook/react/issues/1881#issuecomment-262257503

meanwhile you can use a hack doing:

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

Answer 2

It appears it currently isn't supported based on this GitHub issue https://github.com/facebook/react/issues/1881