[英]React Material-UI Injecting withStyles not working
I am trying to inject styles within same file below, but it's not working. 我正在尝试在下面的同一文件中插入样式,但是无法正常工作。 No styles showing...
没有样式显示...
Is this the best way to inject styles? 这是注入样式的最佳方法吗? So we don't create a gigantic one CSS file for all CSS?
因此,我们不是为所有CSS创建一个巨大的CSS文件吗? or does it duplicate a lot of CSS we write since this page will be imported into the main component like couple other components will be pulled there... What do you guys think?
还是它会重复很多我们编写的CSS,因为此页面将被导入到主要组件中,就像其他组件会被拉到那里一样……你们觉得呢?
import React, { Component } from 'react';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import { withStyles } from '@material-ui/core/styles';
import { red } from '@material-ui/core/colors';
// Styles
const styles = theme => ({
root: {
width: '100%',
marginTop: theme.spacing.unit * 3,
overflowX: 'auto',
backgroundColor: red,
},
table: {
minWidth: 700,
},
row: {
'&:nth-of-type(odd)': {
backgroundColor: theme.palette.background.default,
},
},
});
class UserDataTable extends Component {
render(props) {
const { classes } = this.props;
return (
<div id="UserDataTable">
<Paper className={classes.root}>
<Table className={classes.table}>
<TableHead>
<TableRow>
<TableCell>F</TableCell>
<TableCell>j</TableCell>
<TableCell>S</TableCell>
<TableCell>p</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>1</TableCell>
<TableCell>2</TableCell>
<TableCell>3</TableCell>
<TableCell>4</TableCell>
</TableRow>
</TableBody>
</Table>
</Paper>
</div>
)
}
}
export default withStyles(styles)(UserDataTable);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.