Button BaseStyle not overriding for paddings

🐛 Bug report

Provide a brief description of the bug here

Hi, this is similar to #2015. However, this time paddingX and px do not override the button styles.

💥 Steps to reproduce

Clear and concise reproduction steps are important for us to be able to triage your issue in a timely manner

See the _app.js file in the repro

💻 Link to reproduction

Please create a minimal reproduction in CodeSandbox

• JavaScript Template: JavaScript CodeSandbox template

• TypeScript Template: TypeScript CodeSandbox template

https://codesandbox.io/s/chakra-button-basestyle-repro-spjid?file=/pages/_app.js

🧐 Expected behavior

Tell us what you expect to happen.

🧭 Possible Solution

Not compulsory, but suggesting a fix would be great!

🌍 System information

Software	Version(s)
Chakra UI	1.2.1
Browser	Brave
Operating System	MacOS

📝 Additional information

• Screenshots or code
• Notes or link to ideas

It might be good to check what other props are not being applied, but so far in the repro, the padding in the x direction do not work.

[tawnyzhao]

@mtt87 I just had your issue, I realized it is also due to similar reasons as the padding issue here. For buttons, the background color is defined in the variants object, which is by default uses solid. If you override the bg through the variant, this issue no longer occurs. I think this could be more clear in the docs.

[giedrius-timinskis]

Facing the same issue with Button. Looks like whatever property was used to define the style will need to be used to override it, i.e. per the Button example: https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/button.ts#L168

Example: ⛔️ Doesn’t work

extendTheme({
  components: {
    Button: {
      baseStyles: {
        height: 'auto'
      }
    }
  }
});

✅ Works

extendTheme({
  components: {
    Button: {
      baseStyles: {
        h: 'auto'
      }
    }
  }
});