cannot style nested div with radium

Question

I currently have a nested div which currently contains a react component called react-mobile-picker. Unfortunately there is no styling option to style it, see link:

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

Therefore, i have installed radium which supposedly allows you to style nested items.

I want to style the picker with a specific font. I have tried it in chrome, and the i need to target is called 'picker-container'.

The code is as follows:

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

I can see the above style being applied (styles.picker), but the child style is not being applied (picker-container).

Ideas?

itaydafna · Answer 1 · 2018-09-14T20:16:19.683

In order to style a nested element with radium by it's element's class (or any other css selector) you should use the radium <Style /> component and pass that selector as the scopeSelector prop.

In your case you can use it as follows:

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>

cannot style nested div with radium

1 Answers1