We Keep Coding

MUI React - Override SvgIcon color don't work

I'm using MUI (version 5) on React.
I'm trying to override the icon color for the Error Alert using General StylesOverrides.
I managed to change the color on the Alert component, but I can't find the way to do it for the icon that is in the Alert
In my Overrides Theme this is my code:
const theme = createTheme({
components: {
MuiAlert: { // These changes are working
styleOverrides: {
standardError: {
backgroundColor: colors.error.light,
color: colors.error.dark,
border: '4px solid',
borderColor: colors.error.dark,
}
}
},
MuiSvgIcon: { // These changes are not working
styleOverrides: {
ErrorOutlineIcon: {
htmlColor:'#000000',
main:'#fff000'
}
}
}
},
})
This is the documentation on the MUI website https://mui.com/material-ui/api/svg-icon/ but I'm missing something.
Could you help me, please?

To change the icon color simply do
<Alert color="color.error" />
at place where icon is implemented

how to customize material ui tabs, tabs scroller

Here I am trying to customize this mui tabs, tab color, and tab bottom border color. I have tried to do so by using makestyles and so on but nothing is working.
my code is,
import { makeStyles } from '#mui/styles';
const useStyles = makeStyles({
tab:{
"& .MuiButtonBase-root":{
marginLeft:"25px"
}
},
tabs:{
"& .MuiTabs-indicator":{
ml:"30px"
}
}
})
Besides, I also face issues with customizing mui classes. Though I use a solution that is sx props but I know that is not best practice.

const theme = createTheme({
components: {
MuiTabs: {
styleOverrides: {
indicator: {
backgroundColor: 'orange',
height: 10,
},
},
},
}
})

You can style the selected tab styling with the property '&.MuiTab-root.Mui-selected' as for the border coloring for the current tab, you can use the prop TabIndicatorProps and add a styles property,i.e
export const StyledTab = styled((Tab))({
'&.MuiTab-root.Mui-selected': {
color: 'gold',
},
and
TabIndicatorProps={{
style: {
backgroundColor: '#f1db29'
}
}}

Exporting a custom theme from a UI library using Material-UI

I am creating a custom UI library for work that uses Material-UI. The UI library has a custom theme where I added to the palette object with custom company colors. The theme lives in the UI library, and for elements that live there, I can use the custom colors in makeStyles, but when I try to use the exported theme in the main codebase, the custom colors throw errors in makeStyles.
I believe the issue is I'm not exporting the theme's custom module. I am unsure how to export and import this correctly into the main codebase. Currently, I am only exporting the theme file and importing it into the main codebase.
Main Codebase:
import { theme } from 'customUILibrary';
...
<MuiThemeProvider theme={theme}>
...
</MuiThemeProvider>
CustomUILibrary:
index.ts:
export { theme } from 'theme/theme';
theme/theme.ts
import {
createTheme,
responsiveFontSizes,
} from '#material-ui/core/styles';
import './extendPalette';
export const theme = responsiveFontSizes(createTheme({
palette: {
gradients: {
primary: 'linear-gradient(270deg, #35C7E1 -10.76%, #1A92BD 121.8%)',
secondary: 'linear-gradient(270deg, #194E94 0%, #317CA6 100%)',
},
},
}));
extendPalette.ts
declare module '#material-ui/core/styles/createPalette' {
export interface PaletteOptions {
gradients: {
primary: string
secondary: string,
},
}
export interface Palette {
gradients: {
primary: string
secondary: string,
},
}
}
The custom theme attributes work great inside the UI Library with the UI elements, but when imported into the main codebase the custom attributes aren't being picked up, and in fact causing errors.

As suggested here, you can do something like this:
declare module "#mui/material/styles" {
interface Palette {
custom: {
pink: string;
};
}
interface PaletteOptions {
custom: {
pink: string;
};
}
}
Then you can set you value in theme safely:
const theme = createTheme({
palette: {
custom: {
pink: "pink"
}
}
});
and use it in styles:
<Button sx={{ color: "custom.pink" }}>Content</Button>
See my codesandbox example

Chakra UI for React: change _focus borderColor not work

I set the default theme on Chakra UI for React with extendTheme().
When I try to change the Select component's style like this, the _focus style does not applied, while the color behaves as expected.
Refs
Chakra-UI Style Props
How to change the placeholder color globally?
Captions
Codes
index.ts
import { extendTheme } from '#chakra-ui/react';
import { Select } from './select';
export const theme = extendTheme({
colors: {
brand: '#008561',
brandLight: '#00b485',
},
components: {
Select,
},
});
select.ts
export const Select = {
parts: ['field'],
baseStyle: ({ colorMode }: any) => ({
field: {
color: 'brandLight',
_focus: {
borderColor: colorMode === 'dark' ? 'brandLight' : 'brand',
},
},
}),
sizes: {},
variants: {},
defaultProps: {},
};

To change the focus border color, you have to access the focusBorderColor selector,
This can either be set in the variant you want to change, or in the defaultProps selector of your component theme.
defaultProps: {
focusBorderColor: 'gray.500',
},
Another workaround I have seen, is to set the global shadows to a chakra color, note that any color you define, can also be accessed like the example below
const colors = { mycolor: "#F39C12" }
const shadows = {
outline: '0 0 0 3px var(--chakra-colors-mycolor-500)',
};
const theme = extendTheme({ config, colors, styles, components, shadows });
Workaround was found here: Chakra-UI Issue-663
Hope this helps your project

This worked for me.
_focusVisible={{
outline: "none",
}}

Custom "breakpoint" parameters, not applying. [Reactjs + Material UI]

I'm trying to implement my custom breakpoints over Material UI breakpoints, however the changes is not applying at all, could some one suggest, where I've made a mistake
Theme parameters:
export default createMuiTheme({
palette: {
common: {
whiteSmoke: `${ Whitesmoke }`,
whiteColor: `${ Whitecolor }`
},
primary: { main: `${ Whitesmoke }` },
secondary: { main: `${ Whitecolor }` },
},
breakpoints: {
values: {
test: 740,
},
},
});
Here is the App file, where I'm declaring a break points
1 - Imports
import {useTheme} from '#material-ui/core/styles';
2 - Declaration
const Themes = useTheme();
const adaptbr = useMediaQuery(Themes.breakpoints.down('test'));