styled-components/vscode-styled-components

No syntax and highlight when using template string with string interpolation

xristosNSK opened this issue · 6 comments

xristosNSK commented

I'm currently using @mui/material which includes emotion/react. The following syntax doesn't seem to work.

image

Any suggestions?

oscarvz commented

Just like with styled-components, return the css template string function instead of a plain template literal. This'll not only fix syntax highlighting, but also CSS linters in case you're using those 😄

import { css, styled } from '@mui/material';

export const PropertyWrapper = styled('div')(
  ({ theme: { palette } }) => css`
    border-radius: 25px;
    border: 1px solid ${palette.divider};
  `
);
Twipped commented

@oscarvz I don't believe this works the way you think it does. When I tried it, I got errors about trying to stringify the object that MUI's css function produces.

oscarvz commented

@Twipped this sandbox demonstrates the difference in syntax highlighting. I've been using this approach for basically every project (albeit mostly with styled-components and only once with MUI) as otherwise linting & syntax highlighting won't work.

Do those errors you mention pop up when building your project?

Twipped commented

@oscarvz they were popping up when running jest tests, so it may actually be an issue with emotion's interactions with JSDOM

  • 👍1