如何影響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

回答