Customise theme to remove border radius on all components?

[j-lee8]

Is there a way to remove the border radius on all components in the theme? Also, extendTheme doesn't appear to auto-complete the different props so it's difficult to know what can be customised.

I've tried this but it only works for Button?

const customTheme = extendTheme({ 
	colors: {
		brand: {

		}
	},
	components: {
		Button: {
			baseStyle: {
				rounded: 'none'
			}
		},
		Input: {
			baseStyle: {
				rounded: 'none'
			}
		}
	}
});

Thanks all.

[anubra266]

Hi! I think you're looking for the withDefaultProps extension.

[dannyvaughton]

I don't think this works for border radius, only for variant, size & colorScheme.

[jacklee814]

Hi @JavaJamie
I have the same request too, I checked the Input source code then found the borderRadius in size property, and size was under the sizes.field property. My solution is add field property outer of borderRadius, it's working.

const theme = extendTheme({
  components: {
    Input: {
      sizes: {
        lg: {
          field: {
            borderRadius: 'none',
          },
        },
      },
    },
  },
});

[nitedani]

I had to specify md instead of lg for it to work. I think you need to specify all sizes just to be sure it will stay working.