user2492364 user2492364 - 2 months ago 8
CSS Question

React use radium to change css under div

Here is my original code :

the css will change all the

p
tag under
<div className="TEST">


Home.js

export default class Home extends Component {
render() {
return (
<div className="TEST">
<p>1234567</p>
<p>1234567</p>
<p>1234567</p>
<a>qqqqqqqqqqqq</a>
</div>
);
}
}


style.css

.TEST p {
color:#ffa;
}


And If I use Radium, I need to add on each
p
under
<div className="TEST">


Is there some method I can add the style in
<div className="TEST">
just one time to change the p color like the style.css way ???

import Radium from 'radium';

let styles = {
home:{
test:{
color:'#ffa',
}
}

export default class Home extends Component {
render() {
return (
<div className="TEST">
<p style={styles.test}>1234567</p>
<p style={styles.test}>1234567</p>
<p style={styles.test}>1234567</p>
<a>qqqqqqqqqqqq</a>
</div>
);
}
}

Answer

You can use the Style component of Radium (see more at: https://github.com/FormidableLabs/radium/tree/master/docs/api#style-component)

import React, { Component } from 'react'
import Radium, { Style } from 'radium'

export default class Home extends Component {
  render () {
    return (
      <div>
        <Style scopeSelector=".TEST p" rules={{ color: '#ffa' }} />
        <div className="TEST">
          <p>1234567</p>
          <p>1234567</p>
          <p>1234567</p>
        </div>
      </div>
    )
  }
}
Comments