如何影响React库中的子元素样式？

我正在使用Material-ui库进行反应。我试图影响日期选择器的宽度，以便它适合它包含它的网格系统。如何影响React库中的子元素样式？

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

试图重写根样式只会在呈现元素的其余部分放置一个div，但不会影响实际元素。

这是我呈现：（简体）

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

如何影响从这样的库中的嵌套的元素？

2016-12-05 Alexg2195

这取决于库的实现。通常对于广泛使用的库有可用的体面的文档。

要回答您的特定用例，代码也可用于material-ui datepicker（https://github.com/callemall/material-ui/blob/master/src/DatePicker/DatePicker.js）。正如你在这里看到的，它接受一个'className'属性并将其附加到组件中的根div。

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

.full-width { 
    width: 100% 
}

请注意，它也接受样式属性并将其添加到根div。

我认为你实际上想把它加到内部文本字段中，对此，“textFieldStyle”是属性。如果是日期选取器容器，则为“dialogContainerStyle”。但是，我认为你从代码中获得了它的要点。

2016-12-05 19:52:56 jssridhar

如果您正在使用React组件并且想要影响子元素样式，那么您应确保将样式作为道具传递给父组件并将其应用于子组件。

父元素，如： - <Parent childStyle={styleObject} />

家长的渲染功能如： -

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

2016-12-05 20:07:07 amritdevilo

回答