New to NativeBase and using version 3.4.1.
We're quickly finding that we prefer the "xl" size for icons and text.
Is there an easier way to set all font sizes to xl without overriding every single component?
Currently we're following the docs and overriding defaultProps like this...
import { extendTheme } from 'native-base';
export const ExtendedNativeBaseTheme = extendTheme({
components: {
Button: {
defaultProps: {
size: 'xl',
},
},
Checkbox: {
defaultProps: {
_text: {
fontSize: 'xl',
},
},
},
Input: {
defaultProps: {
size: 'xl',
},
},
Icon: {
defaultProps: {
size: 'xl',
},
},
IconButton: {
defaultProps: {
_icon: {
size: 'xl',
},
},
},
Text: {
defaultProps: {
fontSize: 'xl',
},
},
},
});
The withDefaultSize Theme Extension is what you want.
Modifying the example from their docs:
import { extendTheme, withDefaultSize } from '@chakra-ui/react'
const customTheme = extendTheme(
withDefaultSize({
size: 'xl',
components: ['Button', 'Checkbox', 'Icon', ...],
}),
)
All you would need to do is to list all components that need size xl in the components property