Тема Material-UI: Как управлять порядком или приоритетом применяются классы .MuiXXX?

Question

[РЕДАКТИРОВАТЬ 19 апреля]

Я создал CODESANDBOX , чтобы показать, конечно, проблему, которая не возникает в песочнице. Единственное различие между этим кодом и моим состоит в том, что я продублировал код компонента Button в примере SANDBOX, тогда как в моем приложении компонент Button импортирован из библиотеки (которая принадлежит той же рабочей области пряжи, что и приложение). ) . Библиотека построена с использованием webpack и babel, за исключением React и Material-UI

externals: {
    react: "react",
    "react-dom": "react-dom",
    "react-router": "react-router",
    "react-router-dom": "react-router-dom",
    "@material-ui/core": "@material-ui/core",
    "@material-ui/icons": "@material-ui/icons",
    "@material-ui/lab": "@material-ui/lab",
    "@material-ui/styles": "@material-ui/styles",
    formik: "formik",
},

. Проверка компонентов в браузере показывает разницу при стилизации между песочницей и моим приложением:

на обоих стороны, класс применяется к компоненту таким же образом:

в песочнице

в моем приложении

но на песочнице , MuiButtonBase-root background-color переопределяется MuiButton-root background-color

тогда как в моем приложении все наоборот. MuiButton-root backGroundColor кажется переопределенным, но MuiButtonBase-root background-color

Однако , если я создаю компонент RecreatedButton в приложении, просто импортируя Button component of my UI Library и реэкспортируйте его без каких-либо изменений (просто передавая указанный c реквизит, запрашиваемый компонентом), затем стилирование применяется правильно, как в примере с песочницей.

это так странно для меня ...

Почему такое поведение?

просто импортировать и реэкспортировать как компонент

   import {
        Button as LibraryButton,
        EButtonTypes,
        IButtonProps,
    } from "@mylibrairy/reactcomponentscommon";  <---- importing the button
    import React from "react";

const RecreatedButton: React.FC<IButtonProps> = (
    props: IButtonProps
): JSX.Element => {
    return (
        <LibraryButton type={EButtonTypes.BUTTON}>
            {props.children}
        </LibraryButton>
    );
};

export { RecreatedButton };

Используя оба в app.ts. Один получил тему, другой нет

    import { ThemeProvider } from "@material-ui/core/styles";
    import {
        Button as LibraryButton,
        EButtonTypes,
        IButtonProps,
    } from "@mylibrairy/reactcomponentscommon"
    import React from "react";
    import AppBar from "../../UIComponents/AppBar";
    import { RecreatedButton } from "../../UIComponents/Button";
    import { MUITheme } from "./../../Theming/defaultTheme";

    export const MainApp: React.FC = (): JSX.Element => {
        return (
            <ThemeProvider theme={MUITheme}>
                <>
                    <AppBar />
                    <LibraryButton type={EButtonTypes.BUTTON}> I'm the library component, directly used as is, and background color is NOT CORRECT ></LibraryButton>
                    <RecreatedButton>
                        I'm recreated button, just rexporting the library component, and the backgroundcolor is correct !?!?{" "}
                    </RecreatedButton>
                </>
            </ThemeProvider>
        );
    };

Answer 1

наконец-то я нашел одно решение (не уверен, что оно исправляет причину root, так как я до сих пор не понимаю, откуда оно).

Полагаю, это может помочь некоторым людям, которые сталкиваются с аналогичной проблемой глобального тематирования в Material-Ui.

Оказалось, что мне пришлось изменить способ построения своей реакции / материала. -Ui библиотека компонентов @mylibrairy/reactcomponentscommon.

1- Убедитесь, что в библиотеке все импортируемые файлы, такие как import { Button} from "@material-ui/core", а не, например, import Button from "@material-ui/core/Button"

2- Удалите использование file-loader plugin в .babelrc, чтобы убедиться, что он не меняет способ импорта компонентов Material-UI

3- Pu sh @material-ui/core и @material-ui/icons как dev and peer dependencies в package.json из библиотеки.

4- Перестроить библиотеку, используя webpack и babel для компиляции машинописного текста tsx до js.

Кажется, что все приоритетные вопросы исчезли (было выполнено много тестов и проверено в chrome инструменты разработки). В приведенном выше примере класс .MuiButton-root хорошо применяется после класса .MuiButtonBase-root, таким образом переопределяя, как и ожидалось, backgroundColor.

. Признаю, что я немного запутался, почему это решило проблему ...

Rgds

Answer 2

Вы можете попробовать переопределить глобальные значения по умолчанию для MuiButtonBase

const theme = createMuiTheme({
  props: {
    // Name of the component ⚛️
    MuiButtonBase: {
      // The default props to change
      root:{
        backgroundColor: 'red' 
      }
    },
  },
});

function DefaultProps() {
  return (
    <ThemeProvider theme={theme}>
      <Button>Change default props</Button>
    </ThemeProvider>
  );
}

Рабочая песочница здесь - https://codesandbox.io/s/override-button-base-7qwd5