Firstly, I'll assume you have a NextJS project already set-up, if not, you can follow your preferred configuration Here, then we'll setup Chakra for Next. The First bit's of code we'll write, is to customize some global values.
Overwrite Colors & Breakpoints
Below, we'll overwrite the default primary color and breakpoints
//styles/ChakraTheme.js
import { extendTheme } from '@chakra-ui/react';
const theme = extendTheme({
colors: {
primary: '#201D29',
},
breakpoints: {
sm: '414px',
md: '584px',
lg: '1280px',
},
});
export default theme;
Use Our Overwrites
To use our custom values, we first pass the theme into our ChakraProvider from the Setup.
//pages/_app.js
import { ChakraProvider } from '@chakra-ui/react'
import theme from '../styles/ChakraTheme.js';
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider theme={theme}>
<Component {...pageProps} />
</ChakraProvider>
)
}
export default MyApp
Use Our Custom Color
Then we can use our custom values in our components
//pages/Home.js
import { Box } from '@chakra-ui/react'; /* <== A Box is a Chakra-ui component, equivalent to a div, but one you can style with style props or those from out custom theme**/
const Home = () => {
return (
<Box bg='primary'>Home</Box>
)
}
export default Home
bg is a style prop and shorthand in Chakra-ui for background-color and will give our Box that color we overwrote primary to be in out custom theme
Use Our Custom Breakpoints
To use our custom breakpoints, we pass them in an object to a style prop e.g
import { Box } from '@chakra-ui/react';
const Home = () => {
return (
<Box bg='primary' fontSize={{ base: '18px', sm: '20px' md: '24px', lg: '32px' }}>Home</Box>
)
}
export default Home
base: '18px' The font-size of 18px will apply from 0px- 414px viewport width
sm: '20px' The font-size of 20px will apply from 414px- 584px viewport width
md: '24px' The font-size of 24px will apply from 584px- 1280px viewport width
lg: '32px' The font-size of 32px will apply from 1280px- and up viewport width
Overwrite a component
Now lets overwrite a component
/styles/components/Button.js
const Button = {
// Styles for the base style
baseStyle: {
borderRadius: '10px',
fontFamily: 'Baloo 2',
// <-- border radius & font family is same for all variants and sizes
},
sizes: {
// Styles to be to be applied when passed to the Button
// E.g <Button size='md'>Click</Button>
sm: {
fontSize: '12px',
},
md: {
fontsize: '18px',
},
lg: {
fontSize: '22px',
},
},
// Styles for the visual style variations
variants: {
rainbow: {
bgGradient:
'linear(to-b, #ff96bc, #ffc477 , #fbe84a , #c1f3a1 , #96fce4 )',
color: 'black',
border: '1px solid break',
},
},
// // The default `size` or `variant` values
// defaultProps: {},
};
export default Button;
Add the Button to the Theme
styles/ChakraTheme.js
import { extendTheme } from '@chakra-ui/react';
import { Button } from 'import Button from './components/Button';'
const theme = extendTheme({
components : {
Button
},
colors: {
primary: '#201D29',
},
breakpoints: {
sm: '414px',
md: '584px',
lg: '1280px',
},
});
export default theme;
Use The New Button Variant
Finally we'll use our new variant in a component
import { Box } from '@chakra-ui/react';
const Home = () => {
return (
<Box bg='primary' fontSize={{ base: '18px', sm: '20px' md: '24px', lg: '32px' }}
> <Button variant='rainbow'>
Log in
</Button
</Box>
)
}
export default Home
Learn Responsive layouts with my follow up article
Top comments (0)