首页 文章

Material UI React无法识别DOM元素上的`underlineStyle` prop

提问于
浏览 次
1

我已经按照示例代码来设置材质UI TextField元素的下划线颜色 .

http://www.material-ui.com/#/components/text-field

但是，当我尝试添加自己的样式时，react无法识别此属性 .

<TextField type="number" id="Commission" label="Commission" underlineStyle={{borderColor : orange500}} fullWidth />

我在chrome开发人员控制台中收到以下错误消息

warning.js:33 Warning: React does not recognize the `underlineStyle` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `underlinestyle` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by FormControl)
    in FormControl (created by WithStyles(FormControl))
    in WithStyles(FormControl) (created by TextField)
    in TextField (created by Commissions)
    in div (created by Commissions)
    in div (created by Commissions)
    in Commissions
    in ReactPlaceholder (created by AsyncFunc)
    in AsyncFunc (created by Route)
    in Route (created by App)
    in div (created by App)
    in main (created by App)
    in div (created by App)
    in div (created by App)
    in App (created by Connect(App))
    in Connect(App) (created by Route)
    in Route (created by RestrictedRoute)
    in RestrictedRoute (created by App)
    in div (created by App)
    in IntlProvider (created by App)
    in MuiThemeProvider (created by App)
    in App (created by Connect(App))
    in Connect(App) (created by Route)
    in Route (created by MainApp)
    in Switch (created by MainApp)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by MainApp)
    in Provider (created by MainApp)
    in MainApp

npm查看material-ui版本0.20.0

我已确认TextField元素上存在此属性 .

我正在使用Jumbo React主题，并且textfields的所有下划线颜色都默认为紫色 .

不确定为什么我的自定义样式不会覆盖TextField下划线颜色 .

干杯

javascript reactjs material-ui

1 回答

  • 0

    在代码的某处，您将 underlineStyle prop传递给常规 DOM element （在本例中为 div ）而不是 react 组件

    当您使用 JSX 渲染常规 DOM elements 时，您应该只将 DOM attributes 作为 props 传递 .

    这是有效的，因为所有属性都是有效的 DOM attributes

    <div className="Bla" id="x" style={{color: 'red'}}>
  ...
</div>

    这是无效的，因为 myOwnCustomProp 不是有效的 DOM attribute

    <div myOwnCustomProp='I should not be here'>
  ...
</div>

    这不是错误，只是后来的React版本中引入的警告 . 更多信息here

    回复于

相关问题