MaterialUI для React со стилевыми компонентами - PullRequest
Новая
       43

MaterialUI для React со стилевыми компонентами

1 голос
/ 04 февраля 2020

Я хочу стилизовать Paper MaterialUI Dialog

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

Однако это означает, что все элементы, вложенные в диалог, которые имеют класс MuiPaper-root (например, другие документы) будет наследовать его.

Есть ли какой-либо способ определения области этого стиля только для бумаги, используемой в первом диалоге?

Ответы [ 2 ]

2 голосов
/ 04 февраля 2020

Есть несколько способов подойти к этому. Одним из подходов является использование дочерних селекторов (как упомянуто в ответе Kaca992), но Paper не является прямым потомком Dialog, поэтому для использования этого подхода вам нужно & > .MuiDialog-container > .MuiPaper-root. Другой вариант - использовать PaperComponent prop в Dialog и предоставить ему стилизованный компонент Paper. Третий вариант - использовать MuiDialog-paper CSS класс .

Все три подхода показаны в примере ниже. 

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>
  );
}

Edit Dialog Paper

1 голос
/ 04 февраля 2020

Попробуйте это: оператор 

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

css> будет принимать только дочерние элементы, которые являются прямыми дочерними элементами компонента диалога. Если это не так, посмотрите на другие css операторы: https://www.w3schools.com/cssref/css_selectors.asp

...