React use radium to change css under div - css

Question

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 1

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