如何自定义反应物料ui下一个组件

我正在使用Material UI next branch我想使用表格组件，并且我想更改TableHead组件的样式。如何自定义反应物料ui下一个组件

我的想法是用MyTableHead包装TableHead并添加我自己的样式来覆盖当前样式。

我的代码（在此基础上Composition）：

import React from 'react'; 
import injectSheet from 'react-jss' 
import { 
    TableHead, 
} from 'material-ui/Table'; 

const styles = { 
    th: {   
     fontSize:'20px',   
    },  
} 

const _MyTableHead = (props) => { 
    return (
     <TableHead className={props.classes.th} {...props}> 
      {props.children} 
     </TableHead> 
    ); 
}; 
_MyTableHead.muiName = 'TableHead'  
const MyTableHead = injectSheet(styles)(_MyTableHead); 


export {MyTableHead}

这不起作用：
1.我的风格是由原始风格overrided
2.我得到在浏览器JS控制台错误：

警告：未知道具sheet，classes上的标签。从元素中移除这些道具。有关详细信息，请参阅TableHead https://facebook.github.io/react/warnings/unknown-prop.html 在THEAD（由TableHead创建）（在table.js：15）在_MyTableHead

我觉得我没有做是正确的（由JSS（_MyTableHead）创建），任何想法？

来源

2017-04-12 yossi

在下一个分支中定制组件的方式尚未记录。
这是它是如何做：

import React from 'react'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import {createMuiTheme} from 'material-ui/styles/theme' 
import Button from 'material-ui/Button'; 

const muiTheme = createMuiTheme({ 
    overrides:{ 
    MuiButton:{ 
     root:{ 
     fontSize: 20, 
     } 
    } 
    } 
}); 

class Main extends React.Component { 
    render() { 
    // MuiThemeProvider takes the theme as a property and passed it down the hierarchy 
    // using React's context feature. 
    return (
     <MuiThemeProvider muiTheme={muiTheme}> 
     <Button raised>Default</Button> 
     </MuiThemeProvider> 
    ); 
    } 
} 

export default Main;

来源

2017-04-24 14:11:26 yossi

Example Class from MUINext

材料UI渲染后再生新的类，所以你将永远无法重写任何一个类与预设类。

他们的班级名称看起来像MuiRoot-tableHead-23。最后一个数字是随机的。查找被覆盖类特定的类，然后使用

[class*=MuiRoot-tableHead]{ 
your css settings 
}

如果你有一个主题文件已经安装，我建议什么贝纳说下去。否则，您可以使用此方法手动覆盖它。

来源

2018-02-21 03:43:35

如何自定义反应物料ui下一个组件

回答

相关问题