Input style props not being overwritten with customized theme

Custom theme API for components.Input not working

Describe the bug

Input styles are not being overwritten when using the customize theme API: https://next.chakra-ui.com/docs/theming/customize-theme

To reproduce

customize your theme:

const Input = {
  baseStyle: {
    borderColor: 'primary.accent2',
    _hover: {
      borderColor: 'primary.foreground',
    },
  },
  sizes: {
    sm: {
      fontSize: 'md',
      height: '40px',
    }
  },
  defaultProps: {
    size: 'sm',
  },
}

const theme = extendTheme({
  components: {
    Input,
  }
})

use this input:

import { Input } from '@chakraui/core'

const Component = props => <Input />

Expected behavior

The default exported input should adopt custom theme styles

Additional context

This API and method works with the Button component (theme.components.Button). With Input, however, no styles seem to render. They don’t seem to exist in the DOM at all.

[keithburgie]

Okay I did a deep dive. Hope this is helpful to anyone else who comes along.

• For Input, styles need to be added to baseStyle.field and not just baseStyle
• baseStyle styles are overridden by sizes styles (borderRadius, fontSize, height & padding) as well as variant styles (background, border, borderColor, _focus, _hover and sometimes others.)
• variant styles will override all sizes styles.
• Setting defaultProps.size and/or defaultProps.variant to null will remove those styles. I don’t love this solution because it remove all styles, and I don’t want to have to re-set everything because I wanted a different background color.

The simplest way to make a basic change, like to a background or border, would be to set it on the variant that you’re using:

Input: {
  variants: {
    outline: {
      field: {
        background: "white",
        borderRadius: 0
      } 
    }
  }
}

Here’s a component (err, component style object) that shows all defaults.

const Input = {
  baseStyle: {
    /**
     * Styles set within { variants } will override base styles
     * Styles set within { sizes } will override base styles
     * The Input component uses "md" size and "outline" variant by default.
     *
     * You can unset those defaults by using null in defaultProps:
     *    defaultProps: {
     *      size: null,
     *      variant: null
     *    },
     *
     * You will lose all default styles this way, including things like focus.
     */
    field: {
      // Add custom base styles here
    },
  },
  sizes: {
    /**
     * Input component will receive "md" styles by default
     * Styles set within { variants } will override styles at all sizes
     *
     * The styles below are what Chakra will use unless replaced.
     */
    xs: {
      field: {
        borderRadius: "sm",
        fontSize: "xs",
        height: 6,
        paddingX: 2,
      },
    },
    sm: {
      field: {
        borderRadius: "sm",
        fontSize: "sm",
        height: 8,
        paddingX: 3,
      },
    },
    md: {
      field: {
        borderRadius: "md",
        fontSize: "md",
        height: 10,
        paddingX: 4,
      },
    },
    lg: {
      field: {
        borderRadius: "md",
        fontSize: "lg",
        height: 12,
        paddingX: 4,
      },
    },
  },
  variants: {
    /**
     * Input component will use "outline" styles by default.
     * Styles set here will override anything in { baseStyle } and { sizes }
     *
     * The styles below are what Chakra will use unless replaced.
     */
    outline: {
      field: {
        background: "inherit",
        border: "1px solid",
        borderColor: "inherit",
        _focus: {
          zIndex: 1,
          borderColor: "#3182ce",
          boxShadow: "0 0 0 1px #3182ce",
        },
        _hover: { borderColor: "gray.300" },
      },
    },
    filled: {
      field: {
        background: "gray.100",
        border: "2px solid",
        borderColor: "transparent",
        _focus: {
          background: "transparent",
          borderColor: "#3182ce",
        },
        _hover: {
          background: "gray.300",
        },
      },
    },
    flushed: {
      field: {
        background: "transparent",
        borderBottom: "1px solid",
        borderColor: "inherit",
        borderRadius: 0,
        paddingX: 0,
        _focus: {
          borderColor: "#3182ce",
          boxShadow: "0 0 0 1px #3182ce",
        },
      },
    },
    unstyled: {
      field: {
        background: "transparent",
        borderRadius: "md",
        height: "auto",
        paddingX: 0,
      },
    },
  },
  defaultProps: {
    /**
     * Set either or both of these to null to use only what's in { baseStyle }
     */
    size: "md",
    variant: "outline",
  },
}

[AntonyZ89]

Try setting a variant other than the ones provided in the docs. I found this out by accident, but seemed to fix it for me.

  <ChakraInput
      variant={'something'} // this variant does not exist, but it clears the default variant styles
      {...props}
  />

Setting variant to null in defaultProps works too!

{
  ...
  Input: {
    baseStyle: {
      field: {
        bg: '#4b4b4f',
        borderColor: '#4b4b4f',
        borderWidth: 3,
        ':focus': {
          borderColor: '#a970ff',
          bg: '#000'
        }
      }
    },
    sizes: {},
    variants: {},
    defaultProps: {
      variant: null // null here
    }
  }
}