0

我目前有一个嵌套的 div，它当前包含一个名为react-mobile-picker. 不幸的是，没有样式选项来设置样式，请参见链接：

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

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

我想用特定的字体设置选择器的样式。我已经在 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），但是子样式没有被应用（picker-container）。

想法？

4

1 回答 1

0

为了radium通过它的元素class（或任何其他 css 选择器）设置嵌套元素的样式，您应该使用该radium <Style />组件并将该选择器作为scopeSelector道具传递。

在您的情况下，您可以按如下方式使用它：

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 <Style /> component

   <div style={style.picker}>
   <Style scopeSelector=".picker-container" rules={{ zoom: 10,fontFamily: 'serif'}} />
        <Picker
          optionGroups={zone}
          valueGroups={valueGroups}
          onChange={this.handleChange}
        />
  </div>
于 2018-09-14T19:48:35.457 回答