如何用react材質UI覆蓋TextField組件的寬度？

我試圖減少組件的寬度：如何用react材質UI覆蓋TextField組件的寬度？

https://github.com/callemall/material-ui/blob/master/src/TextField/TextField.jsx

下面是渲染方法：

render() { 

    return (
     <div> 
      <div> 
      <form onSubmit={this.handleSubmit}> 
       <TextField 
        hintText="Email" 
        ref="email" 
       /><br/> 
       <TextField 
        hintText="Password" 
        type="password" 
        ref="password" 
       /><br/> 
       <button className="btn btn-success" onClick={this.loginCommand}><i className="fa fa-sign-in"/>{' '}Log In</button> 
      </form> 
      </div> 
     } 
     </div> 
    ); 
    } 
}

THX！

來源

2016-01-29 Nicolas Henin

請提供到目前爲止所做的工作的代碼。 – pratikpawar

我已添加代碼。 –

我看過參數，inputStyle等... –

從doc：

風格 - >對象 - >覆蓋的直列樣式根元素的。

inputStyle - > object - >覆蓋TextField輸入元素的內聯樣式。

等

所以，你可以這樣做：

<TextField 
    hintText=".." 
    ref=".." 
    style ={{width: '100%'}} 
    inputStyle ={{width: '100%'}} 
/>

也許還通過給一個ID或類名的組成部分，並與CSS定位（添加重要！）：

<TextField 
    id="myId" 
    className="myClass" 
/> 

----- 

.myId{ 
     width: 100% important!; 
    }

來源

2016-01-29 20:58:34 MadeInMoon

您可以在下面的元素上指定內聯樣式

<TextField 
     hintText="Email" 
     ref="email" 
     style = {{width: 100}} //assign the width as your requirement 
    />

或者你可以做如下。

用css屬性聲明一個styles變量。

var styles = StyleSheet.create({ 
    textFld: { width: 100, height: 40} //assign the width as your requirement 
});

將其分配到style在render代碼。

<TextField 
       hintText="Email" 
       ref="email" 
       style = {styles.textFld} 
      />

給它試試讓我知道它是否適合你。我也是新來對付js的。

爲了清楚起見，您可以參考SO上的文檔和其他類似問題。 http://facebook.github.io/react-native/docs/style.html#content

http://facebook.github.io/react-native/

http://facebook.github.io/react-native/docs/flexbox.html#content

React.js inline style best practices

來源

2016-01-29 22:43:32 pratikpawar

它工作嗎？如果寬度爲250像素，我的文本字段正常工作，但對於較小寬度，它不起作用 –

您還可以使用fullWidth property與之反應材料UI。

<TextField 
     id="full-width-text-field" 
     label="Label" 
     placeholder="Placeholder" 
     helperText="Full width!" 
     fullWidth 
     margin="normal" 
/>

來源

2017-12-29 16:36:20

如何用react材質UI覆蓋TextField組件的寬度？

回答

相關問題