Question

我正在为React（with MaterialUI）应用程序编写一些简单的可重用组件。

问题是，我希望允许同一可重用组件的不同样式由使用组件通过道具进行自定义。

这是一些代码：

import { withStyles } from '@material-ui/core';

const styles = theme => ({
image: {
    maxHeight: '200px'
}
});

render() {
        const classes = this.props.classes
        return (
            <div>
                 ...
                 <img className={classes.image} src={this.state.filePreviewSrc} alt="" />
                 ...
            </div>
        );
    }

比方说，我要允许程序员自定义class.image的外观。可以以某种方式覆盖硬编码的图像类吗？

使用withStyles api还是正确的方法，用于创建组件谁的外观可以由使用中的组件/程序员自定义？

Answer 1

可使用三种主要方法来支持样式的自定义：

利用自己风格中的道具
利用道具来确定是否应应用某些课程
通过withStyles进行定制

对于选项3，包装组件的样式将与原始样式合并，但是包装组件的CSS类将在稍后的<head>中出现，并将胜过原始样式。

下面是显示所有三种方法的示例：

ReusableComponent.js

import React from "react";
import { withStyles } from "@material-ui/core/styles";

const styles = {
  root: props => ({
    backgroundColor: props.rootBackgroundColor
      ? props.rootBackgroundColor
      : "green"
  }),
  inner: props => ({
    backgroundColor: props.innerBackgroundColor
      ? props.innerBackgroundColor
      : "red"
  })
};

const ReusableComponent = ({ classes, children, suppressInnerDiv = false }) => {
  return (
    <div className={classes.root}>
      Outer div
      {suppressInnerDiv && <div>{children}</div>}
      {!suppressInnerDiv && (
        <div className={classes.inner}>
          Inner div
          <div>{children}</div>
        </div>
      )}
    </div>
  );
};
export default withStyles(styles)(ReusableComponent);

index.js

import React from "react";
import ReactDOM from "react-dom";
import { withStyles } from "@material-ui/core/styles";

import ReusableComponent from "./ReusableComponent";

const styles1 = theme => ({
  root: {
    backgroundColor: "lightblue",
    margin: theme.spacing(2)
  },
  inner: {
    minHeight: 100,
    backgroundColor: "yellow"
  }
});
const Customization1 = withStyles(styles1)(ReusableComponent);

const styles2 = {
  inner: {
    backgroundColor: "purple",
    color: "white"
  }
};
const Customization2 = withStyles(styles2)(ReusableComponent);

function App() {
  return (
    <div className="App">
      <ReusableComponent>Not customized</ReusableComponent>
      <Customization1>Customization 1 via withStyles</Customization1>
      <Customization2>Customization 2 via withStyles</Customization2>
      <ReusableComponent rootBackgroundColor="lightgrey" suppressInnerDiv>
        Customization via props
      </ReusableComponent>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

使用withStyles api时，如何通过道具自定义React组件的样式？

1 个答案: