[QUESTION] - Overriding default Input & Button style

[cliffordfajardo]

Describe the bug

Passing a style object to <Input> to remove the rounded border does not work. As a user sometimes, would like a rectangular input box

<Input
  value="test"
  placeholder="Search..."
  type="search"
  clearable
  size="lg"
  width="100%"
  style={{
    borderRadius: "initial !important", //❌
  }}
/>;

Allow user to to remove border-radius from inputs and buttons i

Steps to Reproduce the Bug or Issue

1. Pass border-radius: initial !important to the input component & see that it does not remove the border radius

Expected behavior

Passing border-radius: initial !important shouls remove the rounded border

Screenshots or Videos

No response

Operating System Version

MacOS

Browser

Chrome

[cliffordfajardo]

I think we we might need to think about an overrides API. I've seen this used in other libraries like:

• materialUI: https://mui.com/customization/how-to-customize/
• Uber Base Web: https://baseweb.design/guides/understanding-overrides#understanding-overrides

[Dhananjay-JSR]

Hello @cliffordfajardo , NextUI Does Provide different ways to Override Default Styles of Component and ways to create your own component , More Details about which can be found on Official Documentation Page

And coming back to your point to Remove Rounded Corners from Input and Button , the code should be

<Button css={{borderRadius: "0"}}>Default</Button>

<Input css={{ $$inputBorderRadius: "0" }} bordered/>

[cliffordfajardo]

@Dhananjay-JSR - ahh thank you!

I was curious about style vs css prop & overlooked it in the docs

NextUI provides the Stitches css prop for overriding styles easily. It's like the style attribute, but it supports tokens, media queries, nesting and token-aware values.

This resolved my issue, so going to close this 🙏