Блог

Я использую последнюю установку Material-UI в приложении React-Gatsby. Я установил сторонний пакет для карусели (react-material-ui-карусель).

Когда я использую этот пакет, я вижу, что он переопределяет некоторые из моих стилей пользовательского интерфейса, добавляя css-разделы, которые конкурируют с css-разделами моего приложения.

data-emotion дивы добавляются моим приложением, а data-jss дивы стиля добавляются пакетом react-material-ui-carousel .

Есть ли способ ограничить стиль карусели только компонентом карусели и не влиять на другие компоненты пользовательского интерфейса материала на моей странице? (например MuiButtonBase , содержит MuiButtonBase-root правила, которые переопределяют правила моего сайта)

попробуйте проверить блокировку пакета и использовать 3 блока

 "node_modules/react-material-ui-carousel": {
  "version": "2.3.7-mui5",
  "resolved": "https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.7-mui5.tgz",
  "integrity": "sha512-XM6 kn6db  riBKUufl7XQI8eE/qj5XWpkDpHUWnioICCdUqx6cvWJmIqjBqcMNB4FgcgJFVmsE3iEKs/4gRIA==",
  "dependencies": {
    "auto-bind": "^2.1.1",
    "react-swipeable": "^6.1.0"
  },
  "peerDependencies": {
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@mui/icons-material": "^5.0.0",
    "@mui/material": "^5.0.0",
    "@mui/styles": "^5.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
},

"react-material-ui-carousel": {
  "version": "2.3.7-mui5",
  "resolved": "https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.7-mui5.tgz",
  "integrity": "sha512-XM6 kn6db  riBKUufl7XQI8eE/qj5XWpkDpHUWnioICCdUqx6cvWJmIqjBqcMNB4FgcgJFVmsE3iEKs/4gRIA==",
  "requires": {
    "auto-bind": "^2.1.1",
    "react-swipeable": "^6.1.0"
  }
},
    "react-material-ui-carousel": "^2.3.7-mui5",
 

Вы можете использовать StylesProvider @material-ui/core/styles с помощью этого вы можете добавлять префиксы к именам классов и избегать переопределения стилей

 import {
  MuiThemeProvider,
  ThemeProvider,
  StylesProvider,
  createGenerateClassName,
} from '@material-ui/core/styles';

const generateClassName = createGenerateClassName({
  seed: 'classes-custom-prefix',
});

export const Provider = ({ children, theme }) => {
  return (
    <StylesProvider generateClassName={generateClassName}>
      <MuiThemeProvider theme={theme}>
        <ThemeProvider theme={theme}>{children}</ThemeProvider>
      </MuiThemeProvider>
    </StylesProvider>
  );
}; 

У меня были проблемы/несоответствия со стилями между производством и развертыванием. Для меня лучший способ стилизовать элементы и переопределить стили MUI без «!важно» — это использовать:

 import { styled } from "@mui/material/styles";
import Button from "@material-ui/core/Button";

const CustomButton = styled(Button)(({ theme }) => ({
  display: "flex",
  ...
}));
 

А затем вместо использования

<Button ...args>label</Button>

использовать

<CustomButton ...args>label</CustomButton>