mui / mui/material-ui

[docs] Add docs on composing `css` with `styled`

Open
#37,397 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

docs scope: system type: enhancement
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.