与 reactjs 一起使用时如何修复未知道具 zdepth 警告,material ui?

how to fix unknown prop zdepth warning when using with reactjs , material ui?

warning.js:36警告:标签上的未知属性 zDepth。从元素中删除此道具。

我正在尝试渲染一个 .但它显示上述错误。任何人都可以帮忙吗?

import React, { Component } from 'react'; 
import Divider from 'material-ui/Divider'; 
import paper from 'material-ui/Paper'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';

export default class EmploymentContent extends Component { 
  getChildContext() { 
    return { muiTheme: getMuiTheme(baseTheme) }; 
  } 

  render() { 
    return ( 
      <paper zDepth={4}> <ul className="scroll"> </paper>
    ...

您看到此警告是因为您正在使用 小写字母 Paper 组件,并且 React 将这些小写字母标签视为内置组件。

您需要做的就是导入并使用它作为 Paper,从大写字母开始。

When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.

你可以在这里看到 https://facebook.github.io/react/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

还有一个 issue open https://github.com/facebook/react/issues/7848 将其添加到 unknown-props 警告页面。