CODEWITHSUNDEEP
emotioncss-in-jsvanilla-extract
Black Beard
Black Beard

Reputation: 1618

How to select hardcoded CSS class with Vanilla Extract?

I’m migrating from Emotion to Vanilla Extract. I have a component which contains a third-party UI library component. This third-party component has a hardcoded class .ClassWhichICannotChange.
In Emotion I customized this component, like this.

//In Emotion
export const button = css({
    backgroundColor: "#green",
    "& .ClassWhichICannotChange": {
        padding: 6,
    },
});

In Vanilla Extract I tried the same, but got the error:

//In Vanilla Extract
export const button = style({
    backgroundColor: "green",
    "& .ClassWhichICannotChange": {
        padding: 6,
    },
});
//Error - Object literal may only specify known properties, and '"& .ClassWhichICannotChange"' 
//does not exist in type 'ComplexStyleRule'.ts(2353)

Any suggestions how to select hardcoded class in Vanilla Extract?

PS - here is an HTML for better understanding:

<MyComponent className={button}>
   <ThirdPartyLibraryComponent /> //this component has an inner CSS class .ClassWhichICannotChange
</MyComponent>

Upvotes: 0

Views: 220

Answers (1)

Black Beard
Black Beard

Reputation: 1618

Here is the correct way to select hardcoded class in Vanilla Extract

import { style, globalStyle } from "@vanilla-extract/css";

export const button = style({
    backgroundColor: "green",
});

globalStyle(`${button} .ClassWhichICannotChange`, {
    padding: 6,
});

Selectors can be used to select hardcoded CSS class as well, but only if this class belongs to the same element. Vanilla Extract doesn't allow you to select a child element using selectors.

Upvotes: 1

Related Questions