代码之家 › 专栏 › 技术社区 › Steve Waters

在普通css上设置材质ui TextField组件的underlineFocusStyle的样式

inline-styles material-ui reactjs css

1

Steve Waters · 技术社区 · 7 年前

在Material UI的组件中,您可以为组件本身提供一个style对象作为JSX标记上的属性,但您必须为underlineFocusStyle提供一个单独的style对象。

我的意思是,例如TextField组件的underlineforcusstyle。

您可以将其样式设置为:

<TextField hintText="Hint Text" style={{width: '80%'}}
  underlineFocusStyle={{backgroundColor: '#0000FF', height: '2px'}}
/>

现在,如何在普通css中编写它。在设置TextField组件自身样式的基础上,如何设置该组件的underlineFocusStyle的样式?

例如,文本字段宽度的样式当然是:

宽度:100%

但underlineFocusStyle将如何设计? 类似于:

width: 100&
.underline-focus-style: background-color: #000FF

因为我想为组件提供一种样式,它必须用css编写。非常感谢。

1 回复 | 直到 7 年前

1

Hemadri Dasari 7 年前

您可以将css样式应用于underlineFocusStyle,也可以应用于任何材质ui组件。声明一个const样式的对象并添加css,如下所示

const style = {
   "background-color": "#fff", color:"#333"
}

然后将此style对象传递给underlineFocusStyle道具,如下所示

<TextField underlineFocusStyle={style} />

希望这能回答你的问题。