MUI CSS 变量覆盖无法正常工作

Question

我使用以下代码在反应库中定义了可重用的 Manage 按钮

管理按钮.tsx

interface ManageButtonProps {
    size?: 'small' | 'medium' | 'large';
    name?: string;
    dataCy?: string;
    startIcon?: React.ReactNode;
    onClick: () => void;
    children?: React.ReactNode;
}

export function ManageButton(props: ManageButtonProps) {
    return (
        <Button
            name={props.name}
            data-cy={props.dataCy ?? 'manage-button'}
            className="pushRight"
            onClick={() => props.onClick()}
            variant="contained"
            color="primary"
            size={props.size ?? 'large'}
            startIcon={props.startIcon ?? <SettingsIcon />}>
            {props.children ? props.children : 'Manage'}
        </Button>
    );
}

在我的应用程序中，我尝试使用 as

<ManageButton onClick={() => console.log('Button clicked')}>Library Button</ManageButton>

应用程序通过 CSS 变量进行主题化，我通过覆盖默认调色板创建了主题。但在我的应用程序中，我看到默认的原色而不是覆盖的颜色

:root {
  --primary-color: #153d77;
}

主题.ts

import {createTheme} from '@mui/material/styles';

export function getCssVariable(variable: string): string {
    return getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
}

declare module '@mui/material/styles' {
    interface BreakpointOverrides {
        xs: true;
        sm: true;
        md: true;
        lg: true;
        xl: true;
        xxl: true;
        xxxl: true;
    }
}

// A custom theme for this app
const theme = createTheme({
    cssVariables: true,
    breakpoints: {
        values: {
            xs: 0,
            sm: 600,
            md: 900,
            lg: 1200,
            xl: 1536,
            xxl: 1920,
            xxxl: 2200,
        },
    },
    palette: {
        primary: {
            // Removed getCssVariable('--primary-color') and replaced with a color for testing
            main: '#153d77'
        }
    }
});

export default theme;

Github：https://github.com/pavankjadda/mui-css-variables 以下是重现该问题的 Stackblitz 演示：https://stackblitz.com/~/github.com/pavankjadda/mui-css-variables

Answer 1

我不确定，但你忘了添加

ThemeProvider

。

检查以下代码：

function ManageButton(props) {
  return (
    <MaterialUI.Button
      name={props.name}
      data-cy={props.dataCy ?? "manage-button"}
      className="pushRight"
      onClick={() => props.onClick()}
      variant="contained"
      color="primary"
      size={props.size ?? "large"}
      /* startIcon={props.startIcon ?? <MaterialUI.SettingsIcon />} */
    >
      {props.children ? props.children : "Manage"}
    </MaterialUI.Button>
  );
}

function App() {
  const theme = MaterialUI.createTheme({
    cssVariables: true,
    breakpoints: {
      values: {
        xs: 0,
        sm: 600,
        md: 900,
        lg: 1200,
        xl: 1536,
        xxl: 1920,
        xxxl: 2200,
      },
    },
    palette: {
      primary: {
        // Removed getCssVariable('--primary-color') and replaced with a color for testing
        main: "#153d77",
      },
    },
  });
  return (
    <MaterialUI.ThemeProvider theme={theme}>
      <MaterialUI.CssBaseline />
      <ManageButton onClick={() => console.log("Button clicked")}>
        Library Button
      </ManageButton>
    </MaterialUI.ThemeProvider>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mui/3.7.1/css/mui.min.css" />
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@mui/[email protected]/umd/material-ui.production.min.js"></script>