[v5] No documented way of importing css or keyframes for styled-components

[MonstraG]

As per #28657 (comment).

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

All other sections not applicable, really.

emotion has documentation for css prop: https://mui.com/guides/interoperability/#the-css-prop, but not styled-components

[eps1lon]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[MonstraG]

I'm guess I'm gonna copy the original comment here

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

Where should I import { css } from? Following gives me errors:

import { css } from "@mui/styled-engine";

const Container = styled("div")<{ $heightLimit: boolean }>`
	min-width: 0;

	${({ $heightLimit }) =>
		$heightLimit &&
		css`
		    height: 100vh;
		`}
`;

Gives big ts error ending in readonly SimpleInterpolation[] missing [...] from type ArrayInterpolation<some stuff here>

With styled imported like this:
import styled, { css } from "@mui/styled-engine";
it works.

But I think that results in 2 instances of name generator in the app, breaking class names in ssr

And I guess I wanna cc @mnajdova

[damianstasik]

If you want to use MUI with styled-components you will need @mui/styled-engine-sc instead of @mui/styled-engine. Both of the packages export keyframes and css.

[MonstraG]

If you want to use MUI with styled-components you will need @mui/styled-engine-sc instead of @mui/styled-engine. Both of the packages export keyframes and css.

Given the documentation:
https://mui.com/guides/styled-engine/#yarn,

I cannot import anything from @mui/styled-engine-sc because it's not technically is in the dependencies, I can only import from @mui/styled-engine.