Why Chakra UI components not hitting sm sizes?

Question

I have created a brand new NextJs project with typescript to play a little with Chakra UI
I made some custom styles to the Default Button component but it doesn't seem to hit the small size styles or apply some base styles I have defined such as backgroundColor

Here is the code that I wrote to Customize the default Button:

NOTE: the background color does change but you have to specify both bg and background or backgroundColor properties which is kinda weird

export const Button: ComponentStyleConfig = {
  baseStyle: {
    borderRadius: "10px",
    fontWeight: "Regular",
    fontSize: "10pt",
    bg: "red",
    background: "red",
    _focus: {
      boxShadow: "none",
    },
  },
  sizes: {
    sm: {
      fontSize: "8pt",
      bg: "red",
      background: "red",
      backgroundColor: "red",
      color: "white",
      textColor: "white",
      width: "100px",
      w: "100px",
    },
    md: {
      bg: "blue",
      background: "blue",
      backgroundColor: "blue",
      fontSize: "10pt",
      width: "200px",
    },
  },
  variants: {
    filled: {
      color: "#F8F8F8",
      _hover: {
        backgroundColor: "#2B8CFF",
      },
    },
  },
};

user_13771272 · Answer

Try creating breakpoints and set them to the theme object:

// 1. Import the utilities
import { createBreakpoints } from '@chakra-ui/theme-tools';
// 2. Update the breakpoints as key-value pairs
export const breakpoints = createBreakpoints({
  sm: '320px',
  md: '768px',
  lg: '960px',
  xl: '1200px',
});

Then include it on the theme:

export default extendTheme({ breakpoints })

Why Chakra UI components not hitting sm sizes?

1 Answers