React Material-UI注入withStyles不起作用

Question

我正在尝试在下面的同一文件中插入样式，但是它不起作用。没有样式显示...

这是注入样式的最佳方法吗？因此，我们不是为所有CSS创建一个巨大的CSS文件吗？还是重复了很多我们编写的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);

Answer 1

除了您使用backgroundColor: red而不是backgroundColor: "red"以外，样式还可以。