Open xristosNSK opened 1 year ago
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};
`
);
@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.
@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?
@oscarvz they were popping up when running jest tests, so it may actually be an issue with emotion's interactions with JSDOM
Can I use this functional with styled.div
instead styled('div')
? I use import from @emotion/styled
.
It is wished variant of usage, but I don't see syntax highlight in Header component:
When I try to use import from @mui/material
I get error, that "Property 'div' does not exist on type 'CreateMUIStyled
I can fix it, if I use import from emotion and material at the same time:
Do it have any methods of usage to fix it without extra imports?
I got hit by this today:
What seems strange is that there seems to be a test case for it:
It feels like this issue is a continuation of https://github.com/styled-components/vscode-styled-components/issues/194. It's an edge case that was overlooked.
I'm currently using
@mui/material
which includesemotion/react
. The following syntax doesn't seem to work.Any suggestions?