'How to use MUI in Redwood JS?

I want to install MUI in the Redwood JS. But when i ran the command in the project directory

yarn add @mui/material

An error popped up in the console saying

error Running this command will add the dependency to the workspace root rather than 
the workspace itself, which might not be what you want - if you really meant it, make 
it explicit by running this command again with the -W flag (or --ignore-workspace- 
root-check).

I have been searching across the docs, but couldn't find anything.

I checked the commands in Redwiid JS, rw setup ui is the command for adding ui libraries. However, only Tailwind & Chakra is mentioned there. Is there a way to add MUI as UI?

Solution 1:^[1]

Redwood projects are usually created as monorepos. From their website under the section:

How it's Organized

Redwood places both the frontend and backend code in a single monorepo.

The problem is that you are likely running yarn add @mui/material from the root of the project, rather than inside the frontend (/web) project.

Solution 2:^[2]

At the top level we have three directories, api, scripts and web. Redwood separates the backend (api) and frontend (web) concerns into their own paths in the codebase. (Yarn refers to these as "workspaces". In Redwood, we refer to them as "sides.") When you add packages going forward you'll need to specify which workspace they should go in. For example (don't run these commands, we're just looking at the syntax):

yarn workspace web add marked
yarn workspace api add better-fs

in this case you only need Mui on the front:

yarn workspace web add @mui/material

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	smac89
Solution 2	Daher

'How to use MUI in Redwood JS?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]