conventions/selector-disallowed-list

Disallows overrides of Polaris component styles.

Avoid overriding the styles of Polaris components in your SCSS. Consider contributing an extension or enhancement to the component's API instead. Overrides of component classnames are liable to break, as Polaris styles are private and may change at any time without notice.

Example
// Do
+ <Textfield monospaced />
// Don't
- [class*='Polaris-TextField--Input'] {
-   font-family: var(--p-font-family-mono);
- };

Contribute

Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by:

Ignore failure

If styles are intentionally designed to diverge from Polaris and it isn't viable to contribute back to the design system, you can ignore the failing rule. Make sure to provide context as to why you are writing custom styles with a disable description.

Example
// stylelint-disable-next-line -- why custom styles are being used instead of Polaris

    On this page