Переопределение существующих классов Mui с использованием стилей создания

ProgramBox

Переопределение существующих классов Mui с использованием стилей создания

Post author:admin
Запись опубликована:19 января, 2022
Post category:Вопросы по программированию

#css #reactjs #material-ui

Вопрос:

Так что, я думаю, это может быть очень мелким вопросом реализации с моей стороны. Раньше я держал таблицы стилей полностью отдельно от своих component.js файл, но в последнее время я начал видеть некоторые преимущества написания стилей внутри компонента с помощью стилизованных компонентов, эмоций, стилей создания и т. Д. Я попробовал это в фиктивном проекте и начал реализовывать его на некоторых компонентах приложения, над которым я сейчас работаю. Причины были в первую очередь более управляемыми, опытными разработчиками, и это сработало для меня.

Но затем я столкнулся с проблемой переопределения существующих стилей mui.

Например, я использую material-ui для создания этого компонента аккордеона. И есть вложенное свойство

 .MuiAccordionSummary-root.Mui-expanded {
    min-height: 64px;
}

Отредактировать этот мой файл sass было бы очень легко, но как мне заставить его работать со стилями make?

Мои текущие стили выглядят так

 const useStyles = makeStyles((theme) => ({
  root: {
    borderBottom: '0.5px solid',
    borderBottomColor: theme.palette.primary.main,
    marginBottom: '16px',
    maxHeight: '35px',
  },
  summary: {
    backgroundColor: theme.palette.complimentory.main,
    borderBottom: '0.5px solid',
    borderBottomColor: theme.palette.primary.main,
    maxHeight: '35px',
    height: '35px',
  },
  title: {
    fontFamily: 'Helvetica',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontSize: '14px',
    lineHeight: '14px',
    letterSpacing: '0.266667px',
    textTransform: 'uppercase',
  },
  content: {
    marginTop: '15px',
    fontSize: '14px',
    fontStyle: 'normal',
    lineHeight: '16.8px',
    letterSpacing: '0.375px',
    fontWeight: '400',
    fontFamily: 'Helvetica',
    textAlign: 'left',
  },
}))

Я изо всех сил пытаюсь нацелиться на это в стиле макияжа, я думаю, что это должно быть возможно, просто мне трудно, так как я к этому не привык.

Ответ №1:

Я буду использовать это в AccordionSummary качестве примера того, как переопределить существующие стили. В сводке аккордеона есть 6 правил CSS, которые можно переопределить: корневые, расширенные, сфокусированные, отключенные, содержимое и расширяемый значок. Вы можете увидеть это в разделе CSS страницы API AccordionSummary в официальных документах Material UI. Каждый из них соответствует классу пользовательского интерфейса материала для соответствующего компонента, например, корень для AccordionSummary соответствует классу .MuiAccordionSummary-root . Чтобы переопределить эти стили, вы делаете это с помощью переопределения стилей классами.

Используя ваш пример:

Создайте имя класса и добавьте стиль makeStyles . Я создам один под названием summaryExpanded и включу в него стиль minHeight: '64px' .

 const useStyles = makeStyles((theme) => ({
  root: {
    borderBottom: '0.5px solid',
    borderBottomColor: theme.palette.primary.main,
    marginBottom: '16px',
    maxHeight: '35px',
  },
  summary: {
    backgroundColor: theme.palette.complimentory.main,
    borderBottom: '0.5px solid',
    borderBottomColor: theme.palette.primary.main,
    maxHeight: '35px',
    height: '35px',
  },
  summaryExpanded: {
    minHeight: '64px',
  },
  title: {
    fontFamily: 'Helvetica',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontSize: '14px',
    lineHeight: '14px',
    letterSpacing: '0.266667px',
    textTransform: 'uppercase',
  },
  content: {
    marginTop: '15px',
    fontSize: '14px',
    fontStyle: 'normal',
    lineHeight: '16.8px',
    letterSpacing: '0.375px',
    fontWeight: '400',
    fontFamily: 'Helvetica',
    textAlign: 'left',
  },
}))

Переопределите стиль в AccordionSummary компоненте, обратившись к соответствующему имени правила и назначив свой пользовательский класс. В данном случае это так expanded , поскольку мы ищем переопределение .Mui-expanded в AccordionSummary компоненте.

 const classes = useStyles();

<Accordion>
  <AccordionSummary
    classes: {{
      expanded: classes.summaryExpanded,
    }}
  >
  </AccordionSummary>
  <AccordionDetail>
  </AccordionDetail>
</Accordion>

1. Это, кажется, решение для меня. Я все еще работаю над тем, чтобы изменить вложенный элемент, и мне нужно использовать «!важно», чтобы убедиться, что стили переопределены. Спасибо за такой сложный пример.

2. Добро пожаловать @PradhumnaPancholi! Я полностью понимаю; иногда существует несколько классов MUI, которые применяются к определенному вложенному элементу, и становится очень сложно переопределить его

Ответ №2:

Вы можете сделать что — то вроде этого- поиграть с переопределением свойств.

 import { Overrides } from "@material-ui/core/styles/overrides";

const overrides: Overrides = {
  MuiExpansionPanelSummary: {
    root: {
      minHeight: "3.25rem",
      "amp;$expanded": {
        minHeight: "3.25rem",
      },
    },
    content: {
      margin: "0.25rem",
      "amp;$expanded": {
        margin: "0.25rem",
      },
    },
    expandIcon: {
      padding: "0.5rem",
    },
    expanded: {},
  },
};

Ответ №3:

Вы должны использовать <StyledEngineProvider injectFirst> в корне вашего проекта

 import { render } from "react-dom";
import { StyledEngineProvider } from "@mui/material";
import App from "./App";

const rootElement = document.getElementById("root");
render(
  <StyledEngineProvider injectFirst>
    <App />{" "}
  </StyledEngineProvider>,
  rootElement
);

 import * as React from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import makeStyles from "@mui/styles/makeStyles";

const useStyles = makeStyles((theme) => {
  return {
    root: {
      backgroundColor: "red",
      color: "pink"
    }
  };
});

export default function App() {
  const classes = useStyles();
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static" className={classes.root}>
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

Рабочая демонстрация здесь https://codesandbox.io/s/wizardly-stonebraker-qnh3t

Метки: Переопределение существующих классов Mui с использованием стилей создания