I have a react setup in which I am using Tailwind and Material-UI. I have a component library in the Storybook which has MUI Theme in it to style the variants like button outline. I am trying to find a way of how can I use these two things to make the react app white-labeled. Basically, Which properties I can set in my theme that it can be directly applied to the components by the user/providers/companies. Currently, my theme looks something like this in the component library.
import { createTheme, ThemeOptions } from '#mui/material/styles';
import { Colours } from '../common';
export const MyThemeOptions: ThemeOptions = {
palette: {
primary: {
main: Colours.primary,
},
secondary: {
main: Colours.secondary,
},
error: {
main: Colours.error,
},
warning: {
main: Colours.warning,
},
info: {
main: Colours.info,
},
success: {
main: Colours.success,
},
},
components: {
MuiButton: {
styleOverrides: {
root: {
borderRadius: '4px',
},
contained: {
padding: '4px 12px',
},
outlined: {
border: '1px solid #bdbdbd',
textTransform: 'none',
minWidth: 0,
color: '#212121',
},
outlinedSizeSmall: {
padding: '2px',
},
outlinedSizeMedium: {
padding: '6px',
},
outlinedSizeLarge: {
padding: '10px'
},
},
},
MuiButtonGroup: {
styleOverrides: {
grouped: {
minWidth: 0,
},
},
},
MuiCard: {
styleOverrides: {
root: {
boxShadow: '0 3px 7px 0 rgba(98, 125, 152, 0.16), 0 0 2px 0 rgba(36, 59, 83, 0.04)',
},
},
},
MuiToggleButton: {
styleOverrides: {
root: {
border: '1px solid #bdbdbd',
borderRadius: '4px',
textTransform: 'none',
color: '#212121',
minWidth: 0,
},
sizeSmall: {
padding: '2px',
},
sizeMedium: {
padding: '6px',
},
sizeLarge: {
padding: '10px',
}
}
}
},
};
const MyTheme = createTheme(MyThemeOptions);
export default MyTheme;
I am not able to find an article or tutorial or something which could lead me in a direction of how can I achieve the white labeling? If you know any knowledge asset in this direction, please share with me. Thank you!
Related
I am trying to customise my theme for material v5 and I would like to know how I can disable the black border that appears when I hover over the textfield component. This is what I have so far under my custom theme
MuiTextField: {
styleOverrides: {
root: {},
},
defaultProps: {
inputProps: {
style: {
fontSize: '11.8px',
// height: '.85rem',
},
},
},
},
Checkout the documentation at: https://mui.com/material-ui/react-text-field/#customization
import * as React from 'react';
import { alpha, styled } from '#mui/material/styles';
import TextField from '#mui/material/TextField';
const CssTextField = styled(TextField)({
'& label.Mui-focused': {
color: 'green',
},
'& .MuiInput-underline:after': {
borderBottomColor: 'green',
},
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'red',
},
'&:hover fieldset': {
borderColor: 'yellow',
},
'&.Mui-focused fieldset': {
borderColor: 'green',
},
},
});
export default function CustomizedInputs() {
return (
<CssTextField label="Custom CSS" id="custom-css-outlined-input" />
);
}
Change your styleOverrides like this:
MuiTextField: {
styleOverrides: {
root: {
"& .MuiOutlinedInput-root": {
"&:hover fieldset": {
borderColor: "rgba(0, 0, 0, 0.23)",
},
"&.Mui-focused fieldset": {
borderColor: "rgba(0, 0, 0, 0.23)",
},
},
},
},
defaultProps: {
inputProps: {
style: {
fontSize: "11.8px",
// height: '.85rem',
},
},
},
},
import { createStyles, Theme } from '#material-ui/core/styles';
export default (theme: Theme) => {
const { primary } = theme.palette;
return createStyles({
test1: {
fontSize: '30px',
},
test2: {
'& > div': {
color: primary.main,
marginTop: '20px',
},
},
});
};
Here I want to use class test1 in test2. How should I extend it?
You can use the dollar sign to reference the other selector when using JSS:
test1: {
width: 50,
height: 50,
backgroundColor: "pink",
"& $test2": {
backgroundColor: "red"
}
},
test2: {
width: 30,
height: 30
}
Reference
https://cssinjs.org/jss-plugin-nested?v=v10.8.1#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet
I'm trying to override some MUI styles in React Material UI. This is currently working for me:
MuiTab: {
root: {
color: '#284568',
},
textColorInherit: {
opacity: 1,
},
wrapper: {
textTransform: 'capitalize',
},
'&$selected': {
backgroundColor: '#000',
border: '1px solid #CFDCE8',
},
},
However, it gives me a warning on the console:
"getStylesCreator.js:42 Material-UI: You are trying to override a
style that does not exist. Fix the &$selected key of
theme.overrides.MuiTab."
I tried to convert to:
MuiTab: {
root: {
color: '#284568',
'&$selected': {
backgroundColor: '#000',
border: '1px solid #CFDCE8',
},
},
textColorInherit: {
opacity: 1,
},
wrapper: {
textTransform: 'capitalize',
},
},
The warning was gone, but the style won't apply anymore :(
Any suggestions?
Thanks.
This question already has an answer here:
Global outlined override
(1 answer)
Closed 2 years ago.
I have a custom theme in which I'd like to override the border-color of the OutlinedInput component. Anyone has any idea how to override the focused color?
export const defaultTheme = createMuiTheme({
palette: {
primary: {
main: colors.primary,
contrastText: colors.white,
},
...
},
typography: {
...
},
overrides: {
MuiButton: {
outlinedPrimary: {
color: colors.text,
},
},
MuiInput: {
underline: {
'&::before': {
borderBottomColor: colors.grey,
},
'&::after': {
borderBottomColor: colors.greyDark,
}
},
},
MuiOutlinedInput: {
notchedOutline: {
borderColor: colors.grey,
},
}
}
});
Found the solution:
overrides: {
MuiButton: {
outlinedPrimary: {
color: colors.text,
},
},
MuiInput: {
underline: {
'&::before': {
borderBottomColor: colors.grey,
},
'&::after': {
borderBottomColor: colors.greyDark,
}
},
},
MuiOutlinedInput: {
root: {
'&$focused': {
'& $notchedOutline': {
borderColor: colors.greyDark,
},
},
},
notchedOutline: {
borderColor: colors.grey,
},
}
}
I'm using grommet-ui with webpack and react.
How do I set my own color options.
Is there a way to use my own custom colors/color schemes in place of predefined colors like colorIndex="neutral-1".
Yes, there is a way to override them, but it is currently not documented. I would start checking the colors here:
https://github.com/grommet/grommet/blob/master/src/scss/grommet-core/_settings.color.scss
For example, neutral-1 is used from this array
$brand-neutral-colors: (#5d0cfb, #7026ff, #767676) !default;
In your index.scss you can replace that (!default allows replacement):
$brand-neutral-colors: (#333333, #7026ff, #767676)
We are working on adding documentation for custom theme variables.
For Grommet v2 users, you can leverage the theme capabilities and define a customTheme as a js object with your desired colors, following the current structure:
const customTheme = {
global: {
colors: {
// Overriding existing grommet colors
brand: "#4D4CDB",
"accent-1": "#6FFFB0",
"accent-2": "#7FFFB0",
"accent-3": "#8FFFB0",
"accent-4": "#9FFFB0",
"neutral-1": "#10873D",
"neutral-2": "#20873D",
"neutral-3": "#30873D",
"neutral-4": "#40873D",
focus: "#000",
// Setting new colors
blue: "#00C8FF",
green: "#17EBA0",
teal: "#82FFF2",
purple: "#F740FF",
red: "#FC6161",
orange: "#FFBC44",
yellow: "#FFEB59",
// you can also point to existing grommet colors
brightGreen: "accent-1",
deepGreen: "neutral-2"
}
}
};
...
export const Example = () => (
<Grommet theme={customTheme}>
<Box background="orange" >
<Text color="deepGreen">Custom Color</Text>
</Box>
</Grommet>
);
You can override any Grommet color that is mentioned in the docs in a similar fashion.
Wrapping your application with the Grommet component that is pointing to your customTheme object as shown on the example, will allow you full access to your custom colors across your application.
Check the pre-packed themes from https://github.com/grommet/grommet/tree/master/src/js/themes and choose the one that's closest to your goal
Then write your own, but only the parts you want to change
Roll your complete theme by merging the pre-packed with your prefs like so:
import React from 'reactn';
import { dark } from 'grommet/themes';
import { deepMerge } from 'grommet/utils';
import { generate } from 'grommet/themes/base';
import { FormDown } from 'grommet-icons';
const localTheme = {
global: {
font: {
family: 'Montserrat, Roboto, sans-serif',
size: '14px',
lineHeight: '20px'
},
colors: {
brand: '#4040DB',
focus: '#50c050',
[dark-5]: '#aaaaaa',
[dark-6]: '#bbbbbb',
// [light-1]: '#ededed', // has error "light not defined"
},
input: {
padding: '5px;', // this renders a 4px padding!
},
},
button: {
hoverIndicator: {
dark: { color: dark-6 },
light: { color: 'light-3' },
border: { radius: '5px' }
},
disabled: {
color: dark-4,
opacity: '0.6',
},
border: {
width: '1px',
color: 'rgb(238,238,238)',
radius: '4px'
},
padding: 'none',
},
select: {
background: 'dark-1',
icons: {
color: 'rgb(238,238,238)',
margin: '0px 0px',
down: <FormDown />,
},
control: {
open: {
color: 'rgb(238,238,0)'
}
},
options: {
container: {
pad: 'xxsmall',
background: 'dark-1'
},
text: {
margin: 'none',
size: 'small',
color: 'light-1',
},
},
container: {
extend: () => `
flex-grow: 1;
`,
}
},
textArea: {
// not working: background: ${ localTheme.global.colors[dark-2] }; // dark-2
extend: () => `
background: ${ '#333333' }; // dark-1
margin: 2px 0px;
height: 100px;
&:hover {
background: ${ '#555555' }; // dark-2
}
&:focus {
background: ${ '#555555' }; // dark-2
color: ${ '#ffffff' };
}
&::placeholder {
color: dark-5;
font-style: italic;
font-weight: 200;
}
`,
},
textInput: {
extend: `
background: ${ '#333333' }; // dark-1
margin: 2px 0px;
&:hover {
background: ${ '#555555' }; // dark-2
}
&:focus {
background: ${ '#555555' }; // dark-2
color: ${ '#ffffff' };
}
&::placeholder {
color: dark-5;
font-style: italic;
font-weight: 200;
}
`,
},
};
export default recipesTheme
Notice that some of the lines are failed experiments trying to overcome the flaky docs.
This exports a recipesTheme module to be used in the render method of App or whatever:
<Grommet full = { true } theme = { recipesTheme }>
There is this tool https://grommet-theme-builder.netlify.com/ that you can use to somehow see the effect of your changes.