如何在外部样式中使用material-ui断点规则？

Question

我很难在组件的外部样式中添加刹车点规则。在文档中，我找到了如何执行此操作，但是它基于一个文件（组件代码+样式）。

我有表格行组件：

import React, { Component, Fragment } from "react";
import { withStyles } from "@material-ui/core/styles";
import { TableRow, TableCell } from "@material-ui/core";
import tablesCss from "./../styles/tables.css";

export const RowItem = withStyles(tablesCss)(
    ({ item, columns, classes }) => (
        <TableRow key={item[config.key]}>
            {columns.map(prop => (
                <TableCell
                    classes={{
                        root: classes.tableRow,
                    }}
                    key={prop}
                >
                    Lorem ipsum
                </TableCell>
            ))}
        </TableRow>
    )
);

和我的外部样式（tablesCss）：

export default {
    tableRow: {
        backgroundColor: "pink",
        [theme.breakpoints.down('sm')]: {
            backgroundColor: "yellow",
        },
    },
};

如果我使用[theme.breakpoints.down（'sm'）]，则会出现错误“主题”未定义

有什么建议吗？

Answer 1

主要问题是，要使用主题，您的样式必须是一个函数：

const styles = theme => ({
  tableRow: {
    backgroundColor: "pink",
    [theme.breakpoints.down("sm")]: {
      backgroundColor: "yellow"
    }
  }
});
export default styles;

withStyles收到一个函数时，它将把theme作为该函数的参数传递，以便您可以使用主题。我建议的另一个更改是将tables.css重命名为tablesCss.js。重要的方面是它是JavaScript文件而不是CSS文件。根据您使用的捆绑方法及其配置方式，导入CSS文件可能会尝试将其作为CSS包含在HTML文档的开头，并且它不是有效的CSS语法-正是JavaScript被用于帮助生成CSS。

这是一个可行的示例：