[docs] Add docs on composing `css` with `styled`
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Steps to reproduce 🕹
Link to live example:
https://codesandbox.io/s/sweet-meitner-1c6fev?file=/src/App.tsx
No steps to reproduce, just open the link above and you'll see the problem.
Current behavior 😯
Error: styleArg.raw is undefined
Expected behavior 🤔
If I understand the emotion documentation on this correctly, it would expect an array when composing two or more sets of styles. So expected behaviour, I guess, is "it just works".
However, even if this is not correct, I feel documentation on how to actually use css & styled when imported from MUI, is kind of... Missing? Or am I overlooking it?
Context 🔦
It's probably also worth nothing that a styled component created this way, doesn't even have to be used anywhere in order for this error to show up. It breaks at the point of declaring the component, not at the point of using it somewhere. That's probably why the stack trace is quite short.
Your environment 🌎
npx @mui/envinfo
System:
OS: Windows 10 10.0.19045
Binaries:
Node: 18.15.0 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 113.0.5672.127
Edge: Spartan (44.19041.1266.0), Chromium (113.0.1774.50)
npmPackages:
@emotion/react: 11.10.6
@emotion/styled: 11.10.6
@mui/base: 5.0.0-alpha.124
@mui/core-downloads-tracker: 5.11.16
@mui/material: 5.11.16
@mui/private-theming: 5.12.0
@mui/styled-engine: 5.11.16
@mui/styles: 5.12.0
@mui/system: 5.11.16
@mui/types: 7.2.4
@mui/utils: 5.12.0
@types/react: 18.2.0
react: 18.2.0
react-dom: 18.2.0
typescript: 4.9.5
For the sake of completeness, I'm on Firefox 113, but I really don't think it matters much.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox and review the MUI documentation for the imported css and styled APIs, alongside the referenced Emotion composition guidance. Document the supported way to compose multiple style sets and clarify the expected behavior for the reported styleArg.raw error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- documentation, frontend
- Issue type
- Documentation
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100