Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

!important inline styles in react

It's there a way to add inline styles with the !important override?

style={   height: 20+'!important' };  <div style={style}></div> 

This isn't working as I would have hoped.

like image 298
Allan Hortle Avatar asked Apr 15 '14 04:04

Allan Hortle


People also ask

Should you use inline styles in React?

The inline styling concept might not help you to build the best React components in your app. If you're planning to build a very performant, scalable, and rich application inline styling is not the right option for you.

What is inline style React?

React lets you add CSS inline styles that are written as attributes and passed to elements. With inline styles, you have the option to combine CSS syntax with JSX code. Note: Using the style attribute as your primary means of styling elements is generally ​not​ recommended.​

What is important in React JS?

The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in the application. This corresponds to the view in the MVC template. It can be used with a combination of other JavaScript libraries or frameworks, such as Angular JS in MVC.


2 Answers

Apparently React does not support this. But i got this hack as i did my research

    <div ref={(node) => {       if (node) {         node.style.setProperty("float", "right", "important");       }     }}>                         </div> 

Good luck:)

like image 86
Daniel Avatar answered Sep 18 '22 00:09

Daniel


20+'!important' is '20!important'.

When you just give a number, react adds "px" for you; but you're using a string, so you have to specify the unit. Also I'm pretty sure there needs to be a space between "!important" and whatever's to the left of it.

style={{ height: '20px !important' }}; 
like image 40
Brigand Avatar answered Sep 18 '22 00:09

Brigand