首页 文章

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

提问于
浏览
1

在Material-UI的组件中,您可以为组件本身提供样式对象作为JSX标记的属性,但是您必须为underlineFocusStyle提供单独的样式对象 .

我的意思是例如TextField组件的underlineFocusStyle .

你会喜欢它的样式:

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

现在,如何在普通的CSS中写出来 . 该组件的underlineFocusStyle的样式在样式化TextField组件的样式本身之上?

比如,TextField的宽度样式当然是:

宽度:100%

但是如何设计underlineFocusStyle?就像是:

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

因为我想为组件提供一个样式,它必须用css编写 . 谢谢 .

1 回答

  • 1

    您可以将css样式应用于underlineFocusStyle以及任何material-ui组件 . 声明一个const样式对象并添加你的css,如下所示

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

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

    <TextField underlineFocusStyle={style} />
    

    希望这能回答你的问题 .

相关问题