I can't seem to find in any of the Material-UI documentation where the "light", "dark" and "contrastText" properties of a PaletteIntention are applied or what they are used for? I know I can access them with hooks or HOC directly, but I am wondering if those variants are used in any of the built-in components automatically? This is probably obvious, so thanks in advance.
Yes, those theme values are used in MUI components.
The keyword PaletteIntention has only appeared in the document theme/palette/customization for explanation.
What it wants to say is that we can customize the theme default settings.
If we take a close look at the built-in component source like the most common one Button
Refer: the source of MUI Button
You can find that the default styles are using the theme
export const styles = (theme) => ({
/* Styles applied to the root element. */
root: {
...theme.typography.button,
boxSizing: 'border-box',
minWidth: 64,
padding: '6px 16px',
borderRadius: theme.shape.borderRadius,
color: theme.palette.text.primary,
transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
duration: theme.transitions.duration.short,
}),
Which is quite common. I mean, why not they use the style solution inside their own package?
The document may not list all the default style one component is using, still, we can see it inside the source, and we can always customize them via the CSS API document, or override them using the MUI nesting selector or other style solution provided by MUI with theme.
Refer: document of
MUI style solutions
MUI theming
customizing-components
advanced/#theming
Related
I'd like to use custom themes in Tailwind config to set primary/secondary colors for light and dark mode. The Tailwind docs only go over using classes in an html/jsx element like so:
<div class="bg-white dark:bg-slate-900...
Instead of declaring this on every element in my app, I'd like to do the following:
<div class="bg-primary text-secondary" />
and then in config, define something like:
colors: {
light: {
primary: "white",
secondary: "black",
}
dark: {
primary: "black",
secondary: "white",
}
}
Does anyone know of a way to do this? I am using Tailwind with React.
You can use #apply:
.bg-primary {
#apply bg-white dark:bg-slate-900
}
/* ... */
You can even go so far as to write a script to generate this CSS.
https://tailwindcss.com/docs/functions-and-directives
To anyone looking for answers in the future:
I was also looking for the same thing, and the best I think we can do at this point is:
Define colors in your tailwind config use css vars
in root/body have 2 sets of css vars. One default, and other for dark class
More information about setting tailwind config using css vars:
https://tailwindcss.com/docs/customizing-colors#using-css-variables
I actually found two solutions for this:
Daisy UI has a pretty good solution for this built in. However if you don't want to get stuck with using the entire component library, you can do what daisy is doing under the hood with:
Tailwind theme switcher
I have the following configuration in the antd.customize.less file:
#btn-primary-bg: #ffe900;
#btn-primary-color: #primary-color;
#btn-default-color: #primary-color;
#btn-default-bg: #ffffff;
On hovering a primary button everything is ok, but on hovering a default button the text color in the button changes to #btn-primary-bg, which I want to override, but I couldn't find any property like "#btn-default-hover-color" here. How can this be overridden, if at all?
I faced the same issue but I'm still looking for a better solution. However, for the moment, I can suggest that you add something like this to your global style file:
.ant-btn-default:hover, .ant-btn-default:focus {
border-color: #bee2e5;
color: #fff;
}
UPDATE
After antd has been updated to version 5.0.0 there is a prettier way to do it using ConfigProvider.
Let's suppose we have wrapped our App and assigned to the theme an object with parameters.
<ConfigProvider theme={{
components: {
Button: {
colorPrimaryBorderHover: 'red',
colorPrimaryHover: 'lightgray',
colorPrimary: 'red',
colorPrimaryActive: 'lightgray',
colorPrimaryTextHover: 'lightgray',
}
}
}}>
<App />
</ConfigProvider>
Acctually there are a lot of parameters to customize the appereance of your app which you can find in your
node_modules/antd/es/config-provider/context.d.ts file
However your config might be huge but to keep your code readable you might pass this object with interface of ThemeConfig as an exported value from another .ts file.
<ConfigProvider theme={myCustomTheme}>
...
Working with reassigning less variables. Thied to edit everything that connected with #primary-color, nothing changed color generated by Antd for hover/active state. Looks like there is no way to do this with less variables.
I'm trying to change SpeedDial color in material-ui. But I can only change three color "default", "primary", and "secondary" using FabProps.
<SpeedDial
ariaLabel="SpeedDial openIcon example"
className={st.speedDial}
FabProps={{
color: "secondary",
}}
></SpeedDial>
How can I change SpeedDial color using by Hex-color(like "#F19920")??
You can do this in several ways.
You can add custom classes to the component using classes={{}} prop.
Here are the classes you can pass to the component. And here is an example of those classes being used to change your color, on line 26 I add the className, and on line 64 I use it.
Another way is you can overwrite the pallet in your theme object, docs. This way you can use color="primary" and it will use the color that you specified in the pallet.
Is there a way to get only the CSS value of a Tailwind CSS class? For example, if I have translate-x-4 tailwind class I want only the 1rem CSS value (since class translate-x-4 is --tw-translate-x: 1rem;). This would be pretty useful with Framer Motion, because framer motion animation object can accept a wide variety of CSS values like 1rem, #ff3322. Is there some kind of way to do something like this <motion.div animate={{ x: getValue('translate-x-4') }} initial={false} />.
I know there exists twin.macro but it "returns" entire Tailwind CSS class. Is there a similar utility for getting only the value?
I think xwind is what you are looking for.
import xw from "xwind";
const styles = xw`text-red-100 hover:text-green-100 hover:bg-blue-200`;
// OR (with custom array syntax)
const styles = xw`text-red-100 hover[text-green-100 bg-blue-200]`;
Xwind converts your tailwind classes into Postcss-js / JSS compatible syntax.
Something like this:
const styles = {
"--text-opacity": "1",
color: ["#fde8e8", "rgba(253, 232, 232, var(--text-opacity))"],
"&:hover": {
"--text-opacity": "1",
"--bg-opacity": "1",
color: ["#def7ec", "rgba(222, 247, 236, var(--text-opacity))"],
backgroundColor: ["#c3ddfd", "rgba(195, 221, 253, var(--bg-opacity))"],
},
};
I prefer to use vscode and enable extension Tailwind CSS IntelliSense. This way, when you hover over any tailwind classes you can see the complete CSS.
TailwindCSS has a function called resolveConfig that returns an object of the generated values. The theme attribute stores the css values. I used this in my React app as follows (at the top of my file):
import resolveConfig from "tailwindcss/resolveConfig";
const styleConfig = resolveConfig().theme;
styleConfig then is an object with things like backgroundColor, gap, etc.
I'm building a complete custom Material UI theme using global overrides as recommended here: https://material-ui.com/customization/components/#global-theme-override
Example:
const theme = createMuiTheme({
overrides: {
MuiButton: {
root: {
fontSize: '1rem',
},
},
},
});
My question is how do I get a copy of the Material UI documentation with my custom theme applied? https://material-ui.com/getting-started/installation/
Some considerations:
I want the Material UI docs to be updatable (i.e. follow the latest release)
Essentially an exact copy of the Material UI docs wrapped in my custom theme
Any help here would be greatly appreciated!
Came across this mui-theme-creator from MUI's latest documentation https://mui.com/customization/theming/#theme-builder which would help.
However, this is not yet on v5.