How to remove bottom color in Button primary of ant design?

Question

How to remove this bottom border of primary Button component of ant design ?

When i added "colorBgContainer": "#161616" in design token theme, this border bottom appear and i dont wanna this. How can i remove it?

Answer 1

This is the button box-shadow style. You have some ways of removing it:

You can set primaryShadow prop on Button token config:

OBS: You can find every prop you can change on every component token styles here

<ConfigProvider
  theme={{
    token: {
      colorBgContainer: "#161616",
      ... other props, 
     
      Button: {
        primaryShadow: "none"
      }
    }
  }}
>
  .....

</ConfigProvider>

Or set boxShadow prop on Button style prop:

<Button 
  type="primary"
  style={{
    boxShadow: 'none'
  }}
>
  Submit
</Button>

You can also use css files in two ways:

Overwrite every Button css class:

.ant-btn {
  // don't forget to add !important at end 
  // so antd will not overwrite your styles
  box-shadow: none !important;
}

Or overwrite only desired Button style by assigning a custom class to desired Button:

<Button 
  type="primary"
  className={'customStyledButton'}
>
  Submit
</Button>

// css
.customStyledButton {
  box-shadow: none !important;
}

Hope this helps :)