не может стилизовать вложенный div с радием - PullRequest
Новая
       29

не может стилизовать вложенный div с радием

0 голосов
/ 14 сентября 2018

В настоящее время у меня есть вложенный div, который в настоящее время содержит компонент реакции, называемый react-mobile-picker.К сожалению, нет возможности стилизовать его, см. Ссылку:

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

Поэтому я установил радий, который предположительно позволяет стилизовать вложенные элементы.

Iхотите, чтобы стиль выбора с определенным шрифтом.Я пробовал это в 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), но дочерний стиль не применяется (контейнер выбора).

Идеи?

1 Ответ

0 голосов
/ 14 сентября 2018

Чтобы стилизовать вложенный элемент с 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>
...