Question

这是我的原始代码：

css将更改p

下的所有<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;
}

如果我使用Radium，我需要在p下的每个<div className="TEST">添加是否有一些方法我可以在<div className="TEST">中添加样式一次更改p颜色，如style.css方式???

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

您可以使用Radium的Style组件（请参阅：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>
    )
  }
}

反应使用rad来改变div

1 个答案: