styleOverrides not being applied

[oe-josh-martin]

Steps to reproduce

I'm using PigmentCSS for a design system, it's working fine for me to grab the tokens from the theme.tokens, but it's not applying any of the styleOverrides when I pass them to the name / slot.

Package

Accordion.styled.ts

export const Content = styled('div', { name: 'Accordion', slot: 'Content' })(
    ({ theme }) => ({
        padding: `${theme.tokens.spacing.sm} ${theme.tokens.spacing.lg} ${theme.tokens.spacing.sm}`,
    })
);

App
next.config.js

module.exports = withPigment(
    {
        ...
        transpilePackages: ['@...'],
    },
    {
        theme: {
            tokens: {
                padding: ...
            },
            styleOverrides: {
                Accordion: {
                    Content: {
                        backgroundColor: 'red',
                    },
                },
            },
        },
        transformLibraries: ['@...'],
    }
)

Current behavior

Padding styles are correctly applied, but no styleOverrides are carried through. I thought maybe it would only override styles that had been applied, but even if I pass something like the below, still nothing is applied.

styleOverrides: {
    Accordion: {
        Content: {
            padding: 0,
        },
    },
},

Search keywords: style overrides

[brijeshb42]

styleOverrides should be nested inside components key

module.exports = withPigment(
    {
        ...
        transpilePackages: ['@...'],
    },
    {
        theme: {
            ...
            components: {
              Accordion: {
                styleOverrides: {
                  Content: {
                    // your css
                  }
                }
              }
            }
        },
        transformLibraries: ['@...'],
    }
)

Feel free to re-open if you face any issues.

[oe-josh-martin]

Perfect, thanks @brijeshb42. Perhaps worth updating the docs to clarify as they suggest doing it a different way 👍