How to affect child elements styles from a React library?

Question

I am using Material-ui Library for React. I am trying to affect the width of the date picker so it will fit within the grid system that it containing it.

<DatePicker hintText="Set Date" mode="landscape" style={{width: '100%'}}/>

Trying to override the root style only places a div around the rest of the rendered element but does not affect the actual element.

This is what I rendered: (simplified)

<div style="width="100%";">
    <div style="width="256px">
        <input>
    </div>
</div>

How do I affect the nested elements from a library like this?

Answer 1

It depends upon the implementation of the library. Generally for widely used libraries there is decent documentation available.

To answer your particular use case, the code is available as well for material-ui datepicker (https://github.com/callemall/material-ui/blob/master/src/DatePicker/DatePicker.js). As you can see here it accepts a 'className' property and appends it to the root div in the component.

<DatePicker hintText="Set Date" mode="landscape" className='full-width'/>

.full-width {
  width: 100%
}

Notice that it also accepts a style property and adds it to the root div.

I think you actually want to add it to the inner text field though, for which "textFieldStyle" is the property. Or "dialogContainerStyle" if it is for the date picker container. But, I think you get the gist of it from the code.