0

我正在使用Material UI 下一个分支我想使用表格组件并且我想更改TableHead组件的样式。

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

我的代码（基于此组合）：

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. 我的样式被原始样式覆盖
2. 我在浏览器 js 控制台中收到错误：

警告：未知道具sheet，classes在标签上。从元素中移除这些道具。详情请看 https://facebook.github.io/react/warnings/unknown-prop.html in thead (created by TableHead) in TableHead (at table.js:15) in _MyTableHead (created by Jss(_MyTableHead))

我想我做得不对，有什么想法吗？

4

2 回答 2

4

在下一个分支中自定义组件的方法尚未记录。
这是可以做到的：

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-24T14:11:26.390 回答
0

来自 MUINext 的示例类

Material UI 在渲染时会重新生成新的类，因此您将永远无法使用预设类覆盖任何一个类。

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

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

如果您已经设置了主题文件，我建议您按照 yossi 所说的进行。否则，您可以使用此方法手动覆盖它。

于 2018-02-21T03:43:35.443 回答