0

我有一个由许多子组件组成的页面。页面文件夹包含页面文件、外部样式文件和每个子组件文件夹——它们也包含它们自己的样式。

我不确定如何为所有子组件设置外部共享通用样式文件以及每个子组件的外部样式。

IE。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样式未应用。

在文件className中设置Red.js：

TL;DR：我需要一个通用的外部样式文件来应用到一个文件夹中的所有子组件；每个子组件都需要自己特定的外部样式。

这是代码示例：https ://codesandbox.io/s/rypoqk07lo

已解决：我通过将 demoStyles 导入 RedStyles.js 文件，然后使用扩展运算符调用它并将主题作为参数传递来解决这个问题，如下所示：

RedStyles.js

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

代码示例也更新了

4

1 回答 1

1

您忘记将 classes 道具传递Demo.js给您的组件，就像您在<Red />和<Blue />.

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

很高兴记住Material-UI有主题支持。最好Demo.js根据您要执行的操作来使用它。

于 2019-04-04T23:11:34.800 回答