MUI CSS variables overwrite not working properly

Question

I defined reusable Manage button in a react library with below code

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

In my application I try to use as

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

The application themed via CSS variables and I created theme by overwriting default color palette. But in my app I see default primary color instead of overwritten color

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

theme.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 Here is the Stackblitz demo that reproduces the issue: https://stackblitz.com/~/github.com/pavankjadda/mui-css-variables

Your StackBlitz link doesn't appear to work, are there any privacy settings you can adjust? Other than that, is your theme actually being applied with a ThemeProvider? — DBS
– DBS, Commented Oct 21, 2024 at 16:19
@DBS can you try now? Also added Github repo that reproduces the error. — Pavan Jadda
– Pavan Jadda, Commented Oct 21, 2024 at 16:22

Abhay Dedkawala · Accepted Answer · 2024-10-29 10:19:10Z

I'm not sure but you are forgot to add ThemeProvider.

Check below code:

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>

Collectives™ on Stack Overflow

MUI CSS variables overwrite not working properly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related