Как использовать правило материала-точки останова во внешних стилях? - PullRequest
Новая
       5

Как использовать правило материала-точки останова во внешних стилях?

0 голосов
/ 09 января 2019

У меня проблема с добавлением правила точки торможения к внешним стилям моего компонента. в документации я нашел, как это сделать, но он основан на одном файле (код компонента + стили).

У меня есть компонент строки таблицы: 

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')], у меня появляется ошибка "theme" не определена

Любые предложения о том, как это сделать?

1 Ответ

0 голосов
/ 09 января 2019

Основная проблема заключается в том, что для использования темы ваши стили должны быть функцией: 

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.

Вот рабочий пример:

Edit 5052ox9rmp

...