如何用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组件的宽度？

回答

相关问题