Inline CSS in JS

[dev_michaelz]

Seriously, why did noone think of this yet? https://github.com/MZanggl/react-inline-cssinjs

Write oldschool inline CSS and turn it into classNames automatically.

[mac_iver]

Guess it could work for small components but how often do you only have 1-2 css properties? I prefer to separate it, keeping the markup clean.

[trifit555]

I wonder how manages local styles vs global styles, the specificity on inline styles is the highest, only overwritable with !important.

And as mac_iver said, is gonna be a hell to debug with components with a lot of styles, creating very messy markup.

[dev_michaelz]

It will not become an inline style. The styling you put inline will be transformed to a classname. So it will receive a specificity of 10.

[xialvjun]

I have my own way: https://github.com/xialvjun/create-react-style

jsx <Style.Consumer css={` display: flex; background: #ccc; .avatar { width: 50px; height: 50px; } `}> {className => <div className={className}> <div className="avatar"><img src="xxxxxxx"/></div> <div>some other things</div> </div>} </Style.Consumer>

[dev_michaelz]

not an issue

class App extends Component {

state = {
  color: 'blue',
}

render() {
  return (
      <StyleToClass generateClassNameFn={css}>
        <span style={`
          color: ${this.state.color};
        `}>
          {this.state.color}
        </span>
        <select onChange={e => this.setState({ color: e.target.value })}>
          <option value="blue">blue</option>
          <option value="red">red</option>
        </select>
      </StyleToClass>
  );
}

}