Next.js Discord

Discord Forum

globals.css variable cant pass flexDirection to page.tsx without Typescript Error

Answered
Greenish Elaenia posted this in #help-forum
Open in Discord
Greenish ElaeniaOP
/app/globals.css
:root {
--profileColumnsLayout: row;
}
@media (max-width: 700px) {
:root {
--profileColumnsLayout: column;
}
}

/app/profile/page.tsx
const Style: { [key: string]: React.CSSProperties } = {
container: {
display: "flex",
flexDirection: "var(--profileColumnsLayout) ",
},
}

Type '"var(--profileColumnsLayout)"' is not assignable to type 'FlexDirection | undefined'.ts(2322)

I tried adding quote marks like this and it didnt work either
--profileColumnsLayout: "row";

How do I resolve this TS error?
Answered by joulev
it still works right? in that case the ts error is a false positive, you can simply put @ts-expect-error there to override the error

const Style: { [key: string]: React.CSSProperties } = {
    container: {
        display: "flex",
        // @ts-expect-error: This is valid and still works
        flexDirection: "var(--profileColumnsLayout) ",
    },
}
View full answer

2 Replies

Answer
Greenish ElaeniaOP
Didnt know about @ts-expect-error, TIL. Thank you again Joulev 😄