I'm working on converting my app from rebass to chakra and currently dealing with a component that needs 16px
padding on mobile, and 24px
padding on tablet/desktop. In my component I have <Component px={[4, 6, 6]} />
Looking at this chart, I would expect to be able to use these numbers 4, 6
because I have confirmed the font-size is 16px
. However, the actual values I'm seeing are 32px
on mobile and 128px
for tablet/desktop. I think something might be up with my chakra setup because I'm even unable to use inbetween values like 3.5
, however I have had no problems with it so far.
My chakra setup is pretty simple at the moment because I'm early in the migration and I'm not messing with the default chakra values for the space
key so I don't know what's causing these weird numbers.
const config: ThemeConfig = {
initialColorMode: 'dark',
useSystemColorMode: false,
}
const Button: ComponentStyleConfig = {
baseStyle: {
fontWeight: 'bold',
},
variants: {
primary: {
letterSpacing: '-0.19px',
borderRadius: '30px',
paddingLeft: '45px',
paddingTop: '14px',
paddingRight: '45px',
paddingBottom: '14px',
height: '56px',
backgroundColor: colors.white,
color: colors.black,
},
},
// The default size and variant values
defaultProps: {
variant: 'primary',
},
}
const theme = {
colors,
styles: globalStyles,
components: {
Button,
},
}
export default extendTheme({ ...theme, config })