Inline styling with React

Question

I want to include below style in React js file to add asterisk after label.

.required:after {
color: #e32;
content: ' *'; }

I tried below code, but it is giving me astericks before label

const styles = {
    required:
        {
    after:
        {
    content: "*",
    color: "red"
        }
        }};

You might find reading [this](http://stackoverflow.com/questions/28269669/css-pseudo-elements-in-react) helpful. — Hardik Modha, Jan 30 '17 at 13:45
Possible duplicate of [CSS pseudo elements in React](http://stackoverflow.com/questions/28269669/css-pseudo-elements-in-react) — Michal Cumpl, Jan 30 '17 at 15:39

score 2 · Accepted Answer · edited May 23 '17 at 11:53

2

Inline styles cannot be used to target pseudo-classes or pseudo-elements. You need to use a stylesheet.

Try to change your logic before trying this approach.

You can check similar approach here in this issue: CSS pseudo elements in React

edited May 23 '17 at 11:53

Community

1
1

answered Jan 30 '17 at 13:51

Robsonsjre

1,586
11
17

score 0 · Answer 2 · edited May 23 '17 at 12:16

I think this is not possible. Some inline styles constructions are not present yet in React. I will try to check the documentation and to provide you the link.

Why don't you use className inside your JSX and refer the CSS file for that class name?

UPDATE:

In React, inline styles are specified as objects — which you did. You note the camelCased key style names and values are usually strings:

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

React.render(<div style={divStyle}>Hello World!</div>, mountNode);

Vendor prefixes other than ms should begin with a capital letter. This is why WebkitFilter has an uppercase "W".

For instance, this would work:

return (
        <div>
          <span>Something</span>
          <div style={{position: 'absolute', WebkitFilter: 'blur(10px) saturate(2)'}} />
        </div>
    );

However, as explained here using :after won't work.

Here is the example usig CSS:

class Example extends React.Component {

  render() {
    return ( <div className = "required">Test</div> );
  }
}

ReactDOM.render( < Example / > , document.getElementById('root'));

.required:after {
color: #e32;
content: ' *'; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

@mayuri if this helped you please consider clicking the big green ✔. — prosti, Feb 03 '17 at 20:34

Inline styling with React

2 Answers2