无法设置带有radium的嵌套div的样式

Question

我目前有一个嵌套的div，它当前包含一个名为react-mobile-picker的react组件。遗憾的是，没有样式选项来设置样式，请参阅链接：

https://www.npmjs.com/package/react-mobile-picker

因此，我安装了radium，据说它可以让你设置嵌套项的样式。

我想用特定的字体设置选择器的样式。我已经在chrome中尝试过了，我需要的目标是'picker-container‘。

代码如下：

import React, { Component } from 'react';
import Radium from 'radium';
import Picker from 'react-mobile-picker';

class Movement extends Component {
  render() {
    ...
    const style = {
      picker: {
        zIndex: 0,
        paddingTop: '10px',
        position: 'relative',
        ':picker-container': {
          zoom: 10,
          fontFamily: 'serif',
        },
      },
    };
    return (
      <div style={style.picker}>
        <Picker
          optionGroups={zone}
          valueGroups={valueGroups}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

export default Radium(Movement);

我可以看到应用了上面的样式(styles.picker)，但是没有应用子样式(选择器-容器)。

想法？

Answer 1

为了通过元素的class (或任何其他css选择器)使用radium设置嵌套元素的样式，您应该使用radium </code></a>组件并将该选择器作为<code>scopeSelector</code>属性传递。</div><div>在您的示例中，您可以使用它，如下所示：</div><pre><code>import Radium, {Style} from 'radium'; ... // remove the ':picker-container' key from the style object - // that's not where it should be styled const style = { picker: { zIndex: 0, paddingTop: '10px', position: 'relative', }, }; ... // pass the '.picker-container' styles as rules to the &lt;Style /&gt; component &lt;div style={style.picker}&gt; &lt;Style scopeSelector=&quot;.picker-container&quot; rules={{ zoom: 10,fontFamily: 'serif'}} /&gt; &lt;Picker optionGroups={zone} valueGroups={valueGroups} onChange={this.handleChange} /&gt; &lt;/div&gt;</code></pre><div></div>