Пользовательский интерфейс материала Как установить внешние стили для подкомпонентов с одним основным общим стилем для всего компонента - PullRequest
Новая
       16

Пользовательский интерфейс материала Как установить внешние стили для подкомпонентов с одним основным общим стилем для всего компонента

0 голосов
/ 05 апреля 2019

У меня есть страница, состоящая из множества подкомпонентов.Папка страницы содержит файл страницы, файл внешних стилей и папки каждого подкомпонента, которые также состоят из их собственного стиля.

Я не уверен, как настроить внешний общий файл общего стиля для всех подкомпонентов вместе с внешними стилями для каждого из подкомпонентов.

Т.е.DemoStyles.js - это общие стили, а Demo.js - это то, где называются подкомпоненты.

Demo.js: 

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import styles from "./DemoStyles";
import Red from "./red/Red";
import Blue from "./blue/Blue";

function SharedStyles(props) {
  return (
    <React.Fragment>
      <Red />
      <Blue />
    </React.Fragment>
  );
}

SharedStyles.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(SharedStyles);

DemoStyles.js: 

export default theme => ({
  title: {
    color: "white",
    fontSize: 30
  }
});

Стиль title не применяется.

В файле Red.js установлено значение className:

TL; DR: мне нужен один общий внешнийфайл стиля для применения ко всем подкомпонентам, находящимся в одной папке;и каждому подкомпоненту нужен свой внешний стиль, свойственный ему.

Вот пример кода: https://codesandbox.io/s/rypoqk07lo

РЕШЕНО: Я решил это, импортировав demoStyles в файл RedStyles.js, а затем вызвав его с помощью оператора распространения и передачи темыв качестве аргумента вот так:

RedStyles.js

import demoStyles from "../DemoStyles";
export default theme => ({
...demoStyles(theme),
red: {
backgroundColor: "red"
}
});

пример кода также обновлен

1 Ответ

1 голос
/ 05 апреля 2019

Вы забыли передать реквизиты классов на Demo.js своим компонентам, как на <Red /> и <Blue />. 

const { classes } = props;
  return (
    <React.Fragment>
      <Red classes={classes} />
      <Blue classes={classes} />
    </React.Fragment>
  );

Хорошо помнить, что Material-UI имеет поддержку тем . Лучше использовать его на Demo.js в зависимости от того, что вы пытаетесь сделать.

...