设置Office UI Fabric TextField的最大宽度

Question

如何设置TextField的最大宽度？默认情况下，宽度设置为最大大小

Answer 1

您可以通过实现自己的样式函数来设置组件的max-width属性，如this Codepen example所述。

const getStyles = () => {
  return {
    root: {
      maxWidth: '100px'
    }
  }
};

<TextField 
  id='myTextField'
  spellcheck={ false }
  name='bar'          
  placeholder='Placeholder text' 
  defaultValue='Default text'
  styles={ getStyles }
/>

有关此方法的更多文档，请参见https://github.com/OfficeDev/office-ui-fabric-react/wiki/Component-Styling#styles-prop。

Answer 2

您可以将style属性添加到<TextField>组件中：

<TextField
   ...
   style={{maxWidth: '100px'}} 
/>

希望它能对您有所帮助。

Answer 3

尝试使用max-width设置容器应具有的最大宽度。

.text-field{
  width: 100%;
  max-width: 500px;
  height: 50px;
  border: 2px solid black;
}

<div class="text-field">
  <p>example<p> 
<div>