We Keep Coding

Next JS Chakra UI problem when trying to extend theme

I'm trying to extend the chakra ui theme but i get this error.
error - Error: Objects are not valid as a React child (found: object with keys {semanticTokens, direction, breakpoints, zIndices, radii, blur, colors, letterSpacings, lineHeights, fontWeights, fonts, fontSizes, sizes, shadows, space, borders, transition, components, styles, config}). If you meant to render a collection of children, use an array instead.
Here is my code.
import { extendTheme } from '#chakra-ui/react'
import { mode } from '#chakra-ui/theme-tools'
const styles = {
global: props => ({
body: {
bg: mode('#f0e7db', '#202023')(props)
}
})
}
const components = {
Heading: {
variants: {
'section-title': {
textDecoration: 'underline',
fontSize: 20,
textUnderlineOffset: 6,
textDecorationColor: '#525252',
textDecorationThickness: 4,
marginTop: 3,
marginBottom: 4
}
}
},
Link: {
baseStyle: props => ({
color: mode('#3d7aed', '#ff63c3')(props),
textUnderlineOffset: 3
})
}
}
const fonts = {
heading: "'M PLUS Rounded 1c'"
}
const colors = {
grassTeal: '#88ccca'
}
const config = {
initialColorMode: 'dark',
useSystemColorMode: true
}
const theme = extendTheme({ config, styles, components, fonts, colors })
export default theme

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",
}}

Use the palette material in the theme and apply it

I am a beginner in material react. I used a palette in the theme in my code, but it shows me a different color code when it displays. please guide me
theme code
import {createMuiTheme} from "#material-ui/core";
const primaryColor="#FF4D23";
const Theme = createMuiTheme({
overrides: {
MuiTypography: {
root: {
fontFamily: "shabnam !important",
}
},
palette:{
primary:{
main:primaryColor,
}
}
}
});
export default Theme;
style code
LogoText:{
color:theme.palette.primary.main,
fontSize:'23px ',
fontWeight:600,
marginRight:'10px'
},
But it shows
**
color: #3f51b5;
**

In material-ui v5 How are you meant to override the styles of properties that don't exist in the themes components

I am trying to style MuiDataTables and am currently using the adaptv4theme to do it like below
declare module '#material-ui/core/styles/overrides' {
export interface ComponentNameToClassKey {
MUIDataTable: any;
MUIDataTableFilterList: any;
}
}
export const theme = createMuiTheme(
adaptV4Theme({
overrides: {
MUIDataTable: {
paper: {
boxShadow: 'none',
},
responsiveBase: {
overflow: 'clip',
},
},
MUIDataTableFilterList: {
chip: {
margin: '8px',
},
},
However adaptV4Theme is getting deprecated and do not know how to upgrade my code to the new convention as when I try
theme.components = {
...theme.components,
MUIDataTable:{
overrideStyles: {
},
},
I get the following error:
Object literal may only specify known properties, and 'MUIDataTable' does not exist in type 'Components'.
How am I meant to move away from using adaptV4Theme?

The following declaration works when transitioning from mui-v4 to mui-v5:
export const theme = createTheme({
components: { // <------ rename "overrides" to "components"
MUIDataTable: {
styleOverrides: { // <------ put override property INSIDE component definition
paper: {
boxShadow: 'none',
},
responsiveBase: {
overflow: 'clip',
},
},
}.
},
});
See: https://mui.com/customization/theme-components/#global-style-overrides