Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expose theme for mixins #44213

Closed
o-alexandrov opened this issue Oct 25, 2024 · 4 comments
Closed

Expose theme for mixins #44213

o-alexandrov opened this issue Oct 25, 2024 · 4 comments
Assignees
Labels
customization: theme Centered around the theming features new feature New feature or request out of scope The problem looks valid but we won't fix it (maybe we will revisit it in the future)

Comments

@o-alexandrov
Copy link
Contributor

o-alexandrov commented Oct 25, 2024

Summary

There are 2 problems:

  1. Currently mixins type is part of ThemeOptions in:

export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'>, CssVarsOptions {

It's a duplicate as mixins already exists in:

  1. mixins expects an object; it should also allow to pass a function (theme) => mixins
    • currently, when using with CSS variables, you don't have access to the MUI CSS variables' names. i.e. I can't define theme.vars.palette-dependent styles in mixins, because there's no built-in way to access them

Motivation

Similar to components[COMPONENT_NAME].styleOverrides.root, It should be possible to set:

mixins: ({ theme }) => ({
  myExampleMixin: {
    border: `1px solid ${theme.vars.palette.primary.main`,
    // ...myOtherStyles
  }
})

Search keywords: theme, mixins

@o-alexandrov o-alexandrov added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 25, 2024
@mj12albert mj12albert added customization: theme Centered around the theming features new feature New feature or request labels Oct 28, 2024
@siriwatknp
Copy link
Member

For workaround, I suggest to attach the mixins after theme creation.

const theme = createTheme();

theme.mixins = {
  …theme.mixins,
  myExampleMixin: {
    border: `1px solid ${theme.vars.palette.primary.main}`,
    // ...myOtherStyles
  }
}

If this does not work for you, feel free to reopen the issue with explanation.

Copy link

github-actions bot commented Jan 9, 2025

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@o-alexandrov How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

@github-actions github-actions bot removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 9, 2025
@siriwatknp siriwatknp added the out of scope The problem looks valid but we won't fix it (maybe we will revisit it in the future) label Jan 9, 2025
@siriwatknp
Copy link
Member

I put out of scope here because I don't think the theme signature will change in v6 and v7.

@o-alexandrov
Copy link
Contributor Author

There’s no button for me to reopen.
I’ll try to define mixins outside of createTheme, but I guess it would result in the need to define components also outside of the createTheme as components typically depend on mixins.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
customization: theme Centered around the theming features new feature New feature or request out of scope The problem looks valid but we won't fix it (maybe we will revisit it in the future)
Projects
None yet
Development

No branches or pull requests

3 participants