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
Related
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'
}
}}
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",
}}
I am using react-native-elements in my react-native application.
My app is wrapped with the ThemeProvider to pass the theme down to all components.
<SafeAreaProvider>
<ThemeProvider theme={Theme}>
<Loader visible={loader.loading} text={loader.message} absolute={true} />
<RootNavigation />
</ThemeProvider>
</SafeAreaProvider>
In the theme file i define the values i want to use across the app.
const theme = {
colors: {
primary: '#6A69E2',
primaryDark: '#4747c2',
primaryLight: 'rgba(106, 105, 226, 0.35)',
gray: {
dark: '#242424',
default: '#666',
medium: '#999',
light: '#ccc',
lightest: '#e7e7e7',
},
},
text: {
size: {
small: 12,
default: 16,
large: 18,
h1: 26,
h2: 22,
h3: 20,
},
},
Text: {
style: {
fontSize: 16,
color: '#242424',
fontFamily: 'Roboto',
},
},
Button: {
style: {
borderRadius: 50,
},
disabledStyle: {
backgroundColor: 'rgba(106, 105, 226, 0.35)',
},
},
};
export default theme;
For the values the original theme of react-native-elements providing this is working. For example i can access the colors by using
const theme = useTheme()
theme.colors.primary
But when i want to add some new properties like primaryDark i'll get an linter error.
Object literal may only specify known properties, and 'primaryDark' does not exist in type 'RecursivePartial<Colors>'.ts(2322)
In the doc of react-native-elements is a part about declaration merging, but i don't understand how i can archive this
https://reactnativeelements.com/docs/customization/#typescript-definitions-extending-the-default-theme.
Somebody could help me with this?
Well, declaration merging still works. This seems like a bug on the lib's part.
Their doc says you can augment the Color interface in module 'react-native-elements'. But currently (as of 2021-04-18, with v3.3.2) that interface is actually hidden inside module 'react-native-elements/dist/config/colors', not directly exposed at the top level, weird.
I suggest you file an issue to their repo. Never mind, someone already filed the issue.
Tested on my machine, following solution works.
import React from 'react'
import { useTheme, ThemeProvider } from 'react-native-elements'
declare module 'react-native-elements/dist/config/colors' {
export interface Colors {
primaryDark: string
primaryLight: string
}
}
const ChildComp = () => {
const theme = useTheme()
theme.theme.colors.primaryDark // <-- No more error 🎉
return <div>foobar</div>
}
Reply to OP's comment. You can augment interface however you like, as long as the augmented key doesn't exist before. For example add foobar key to FullTheme.
declare module 'react-native-elements' {
export interface FullTheme {
foobar: string
}
}
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
I can load and render custom fonts for text in general, but when i try to specify the font Family for my navigation bar, i get an error: "fontfamily 'poetsenone' is not a system font and has not been loaded through Font.Loadsync.
i've loaded the font in my root comopnent # app.js using Font.Loadasync.
// homescreen.js:
static navigationOptions = {
title: 'Scan',
tabBarOptions: {
labelStyle: {
fontSize: 20,
fontFamily: "poetsenone"
},
tabStyle: {
},
style: {
marginTop: 23,
backgroundColor: '#423D3D',
},
}
};
//app.js
export default class App extends React.Component {
componentDidMount() {
Font.loadAsync({
'poetsenone': require('./assets/fonts/poetsenone.ttf')
});
}
render() {
return (
<AppContainer />
);
}
}
Isn't app.js typically the top-level component? what's going on?
Remove the quotes around 'poetsenone' in loadAsync and it should work.