CODEWITHSUNDEEP
reactjs
Alexg2195
Alexg2195

Reputation: 605

How to affect child elements styles from a React library?

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?

Upvotes: 3

Views: 2386

Answers (2)

amritdevilo
amritdevilo

Reputation: 86

If you are using a React Component and you want affect the child element style then you should sure pass the styles as a prop to the parent component and apply it to the child component.

Parent element be like:- <Parent childStyle={styleObject} />

Parent's render function will be like:-

render(){ return (<Child style ={this.props.styleObject} />); }

Upvotes: -1

jssridhar
jssridhar

Reputation: 458

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.

Upvotes: 1

Related Questions