Adding custom CSS to Polaris components since Vite

[asacarter]

Since the introduction of Vite, the older method of adding custom CSS with links seems to break Polaris and no longer works.

CSS Modules work fine for my own elements but can I add some additional css the content that is rendered by Polaris components?

For example <Card sectioned> Will render <div class="Polaris-ShadowBevel" style="--pc-shadow-bevel-z-index: 32; --pc-shadow-bevel-content-xs: &quot;&quot;; --pc-shadow-bevel-box-shadow-xs: var(--p-shadow-100); --pc-shadow-bevel-border-radius-xs: var(--p-border-radius-300);"></div>

How can I add sone additional CSS to Polaris-ShadowBevel?

[muchisx]

hey @asacarter,

I do this by using css's modules :global pseudo selector.

I wouldn't recommend globally overriding these styles, but if you have a specific use-case you can do so by targeting a module class followed by a global exception such as.

Component

import type { CardProps } from '@shopify/polaris';
import { Card } from '@shopify/polaris';
import styles from './styles.module.css';

export default function CustomCard(cardProps: CardProps) { return (

);

> CSS
```css
.container > :global(.Polaris-...) {
  background-color: pink;
}

Now your customization should be localized to only that instance.

[asacarter]

Hi @muchisx,

Thanks for the workaround. I've just tried it and it works great.

My use case was adding height: 100% to the card so that they have equal heights in a grid.

Is there also anyway to enable the old method of links without it breaking Polaris?

[muchisx]

Can you show what code is the one you mention that is breaking Polaris and what is the result you want?

[asacarter]

Adding the code below causes some parts of Polaris to not render correctly, even if the stylesheet is empty.

Two examples that I have found are that cards have square edges instead of rounded and progress bars don't have any fill.

I had to create a whole new app and merge my app code from a previous version not using Vite until I found what was causing the issue.

import styles from "~/styles/mypage.css";
export const links = () => [{ rel: "stylesheet", href: styles }];

[matteodepalo]

@asacarter thank you for opening this issue, we'll take a look.