带有样式组件的 React 材质 UI答案

【问题标题】：MaterialUI for React with Styled-Components带有样式组件的 React 材质 UI
【发布时间】：2020-05-20 15:32:58
【问题描述】：

我想为 MaterialUI 的Dialog 的Paper 设置样式

const StyledDialog = styled(Dialog)`
  & .MuiPaper-root {
    width: 600px;
  }
`;

但是，这意味着嵌套在 Dialog 内且具有 MuiPaper-root 类的所有元素（例如，其他 Papers）都将继承它。

有没有办法将此样式仅用于第一个 Dialog 使用的 Paper？

【问题讨论】：

标签： reactjs material-ui styled-components

【解决方案1】：

有几种方法可以解决这个问题。一种方法是使用子选择器（如 Kaca992 的回答中所述），但 Paper 不是 Dialog 的直接子代，因此要使用这种方法，您需要 & > .MuiDialog-container > .MuiPaper-root。另一种选择是使用 Dialog 的 PaperComponent prop 并为其提供样式化的 Paper 组件。第三种选择是利用MuiDialog-paperCSS class。

所有三种方法都显示在下面的示例中。

import React from "react";
import Button from "@material-ui/core/Button";
import DialogTitle from "@material-ui/core/DialogTitle";
import Dialog from "@material-ui/core/Dialog";
import Paper from "@material-ui/core/Paper";
import styled from "styled-components";

const StyledDialog = styled(Dialog)`
  & > .MuiDialog-container > .MuiPaper-root {
    background-color: purple;
  }
`;
const StyledDialog2 = styled(Dialog)`
  & .MuiDialog-paper {
    background-color: blue;
  }
`;
const StyledPaper = styled(Paper)`
  background-color: green;
`;

export default function SimpleDialogDemo() {
  const [open1, setOpen1] = React.useState(false);
  const [open2, setOpen2] = React.useState(false);
  const [open3, setOpen3] = React.useState(false);

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={() => setOpen1(true)}>
        Open dialog using child selectors
      </Button>
      <Button variant="outlined" color="primary" onClick={() => setOpen3(true)}>
        Open dialog using MuiDialog-paper
      </Button>
      <Button variant="outlined" color="primary" onClick={() => setOpen2(true)}>
        Open dialog using custom Paper
      </Button>
      <StyledDialog
        onClose={() => setOpen1(false)}
        aria-labelledby="simple-dialog-title"
        open={open1}
      >
        <DialogTitle id="simple-dialog-title">
          Paper styled via child selectors
        </DialogTitle>
      </StyledDialog>
      <StyledDialog2
        onClose={() => setOpen3(false)}
        aria-labelledby="simple-dialog-title"
        open={open3}
      >
        <DialogTitle id="simple-dialog-title">
          Paper styled via MuiDialog-paper
        </DialogTitle>
      </StyledDialog2>
      <Dialog
        onClose={() => setOpen2(false)}
        aria-labelledby="simple-dialog-title"
        open={open2}
        PaperComponent={StyledPaper}
      >
        <DialogTitle id="simple-dialog-title">
          Paper styled via custom Paper component
        </DialogTitle>
      </Dialog>
    </div>
  );
}

【讨论】：

【解决方案2】：

试试这个：

const StyledDialog = styled(Dialog)`
  & > .MuiPaper-root {
    width: 600px;
  }
`;

css > 运算符将仅采用对话组件的直接子级的子级。如果不行，请查看其他 css 运算符：https://www.w3schools.com/cssref/css_selectors.asp

【讨论】：