How do I make #mui/system aware of my theme settings?
When using Stack's sx prop, theme is defined in createTheme.d.ts, but there doesn't seem to be a way to extend or provide overrides.
As a workaround, I'm using styled to extend Stack with my theme values.
As #Camilo stated, use import {Stack} from "#mui/material" instead of from #mui/system.
Related
I want to style my custom React/MUI components by default, but still have the parent MUI ThemeProvider be able to override my styles.
For example, let's say that I have a Button that is green by default (styled in my code), but it should be able to have the colour overridden by a default theme passed down via ThemeProvider.
I can't seem to find anyway to do it as any styling I apply in my component becomes the default as it's the last in the CSS/styling tree.
I couldn't find much information in the documention or github issues about that topic — I can just tell you how to cope with the situation and how it works currently in v5.
It seems like the priority is as follows:
sx > styled() > theme
ie. sx has the highest priority.
At first it seems quite strange that you cannot overwrite something with your theme, but on the other hand you'd also like to be able to overwrite the theme with sx occasionally. So to me the priority makes sense.
You should not use !important in the theme if possible, because it prevents sx and styled() from doing its job.
What you'd do is ship reusable components unstyled (no styled() or sx) and style them via the theme.
Perform the colorization in the theme. Width, height, margins and paddings you can also define via styled() and/or sx if you don't need to change those in the theme.
I am using the particles component from react-tsparticles and it takes in a props called styles and canvasClassName - where you can give it a class name (and not an object of styles).
I can use the makestyles to create a style class that I can pass to the canvasClassName however that is deprecated so what is the alternative for v5?
I need to use the theme values from mui so putting the styles into a .module.css file isnt an option
I believe these two props both use emotion under the hood and they seem to do much the same thing. I've been using the css prop because I prefer template tags and real css vs. javascript style names for css properties. Is there any reason to prefer one over the other given that they are basically interchangeable in terms of functionality?
I read the page about the new MUI styles system here: https://next.material-ui.com/system/basics/
And it feels to me that the main difference is the following:
The css prop lets you write something that looks like classic css, as you would do in actual CSS, or Less/Sass, or styled-components
The sx prop gives access to the 'system' which is a set of utilities to quickly access props with shortcuts, as well as theme properties, which already existed before v5, but are now even easier to use.... after some learning curve...
The above documentation page gives a lot of examples.
In the Office Fabric UI documentation every component has two interfaces, for example
https://developer.microsoft.com/en-us/fabric#/components/nav
has
INavStyleProps interface
and
INavStyles interface
a component implementing INavStyleProps can take in any of the listed props to customize style, for example
I am wondering if there is any way to interact with INavStyles classes exposed through the documentation; essentially what does implementing the INavStyles interface guarantee to the consumer of the component, other than the listed classes and styles are implemented. Is there a way to override, customize, or otherwise interact with the classes exposed through this interface similar to how we can use props to interact with components implementing INavStylesProps.
Here is link showing the use of both interfaces for Nav. It's a how we give to Nav the default styles.
In order to override the default styles for any INavStyles area, you can use the styles prop and pass to it a styleFunctionOrObject. As you can see from the first link provided, INavStyleProps are used to pass some values to be used in the styling of the parts of the Nav or booleans to have some conditional styling. Also, that is how we pass the theme to the styles.
A style function you can pass to styles prop would look exactly as the one we use to provide the default styles minus the getGloballClassNames. Also if you want to style just one area the return type should be Partial<INavStyles> as all areas are required and it will complain if you don't provides styles for all of them.
Let me know if this cleared the confusion on how to make use of both interfaces.
We are using styled-components in the project and we are wondering if there is a way to have a full styling capability of react-select V2. I mean it's certainly possible to use objects to define styling, but it feels rather inconsistent and makes a bit worse DX.
From my understanding, the styled-components work by creating generated className and attaching to elements. That would essentially mean I would have to use components prop anytime I need to eg. change text color. I cannot use styles if I want to avoid object CSS-in-JS. Is that correct?
Simply put, if the component you want to style with styled-components accepts a className property, it can be styled with it using the styled(Component) syntax.
I see react-select accepts className for every component, so it should work fine.
ex:
import Select from 'react-select';
import styled from 'styled-components';
styled(Select)`
background-color: red;
font-size: 20px;
`;