Styled components workflow in Mui - how to style

Question

I am working on a new react project and using material ui with styled components and having some trouble with styling and organization. I've read up on styled components and best practices but I'm still unable to find a solution to styling in big projects.

I've seen many suggestions:

• to create styled components for each time some css needs to be added and storing all these components inside styled.ts file. This approach removes all styling and layout concerns into a separate file but is a lot of work to create styled components for everything
• to make a wrapper styled components around the main react component and use class names - kind of like importing a css file regularly and working with classes
• to make inline css changes if some padding is needed or something and only make styled components for reusable/lengthier css blocks. Doesn't really separate styling and is not as clean since we're leaving inline css but is easier to write
• to treat styled components as regular components, have them in separate files and everything. A component is a component, no longer needing to distinguish between stlying and componentization

Not saying any of these are bad suggestions, but they're quite conflicting and I don't have experience with this. I'd just like to know a scalable approach.

tldr: Is there a good and clean workflow for working with styled components for big projects?

Answer 1

Material UI and styled-components are to achieve different purposes in application. MUI has ui written by someone else you can use in your application to save time, However you will have to customise them overriding with your custom css. styled-component will help organise your custom css

styled-component makes application supper clean (best readability over CSS) and easy to maintain ( better maintainability over CSS).

• Makes it easy to identify which css are being used and you can easily delete unused styles.
• It makes dynamic styling very simple through props with global theme.
• You can import your style anywhere in the project and re-use it.

You should, make style.js / style.ts anywhere in your project based on your convenience. As best practice you should make one/many global\style.js where you can keep all re-usable components of your project. and style.js inside your component folder for styles dedicated to that component only.

To get most out of using CSS in JS pattern (in your case it is styled-component ) you should use it with styled-system it will help you easily make your ui components responsive with minimum code and help build best re-usable components for your application. See details here Styled System

Here are some examples using styled-system as you need,

Suppose you would like to create a card container to be used anywhere in application UI,

import theme from './themes/theme';
import styled from 'styled-components';
export const Card = styled.div`
  transition: ....;
  background: ${(props) => (props.backColor || theme.colors.defaultColor)};
  box-shadow: 1px 1px 1px rgb(. . . / .%);
  border-radius: 8px;
  ...
`;

Use it anywhere in your application as,

  import {Card, ..} from './style.js'
    
    <Card>
      ....
    </Card>
    
    <Card backColor={'#some-color-code'}>
      ....
    </Card>

Answer 2

I spent quite a lot of time trying to answer a similar question myself: How best to create custom styled components in MUI

I'm afraid the answer is that there is not a good solution with MUI.

Answer 3

In my project I have used something like this. I have used components coming from Material UI and passed it into styled-components so that I can write normal CSS. Overriding Material UI styles is a cake-walk as I can look up into MUI Docs to find appropriate classname and override styles for it.

Also the component returned from this file is nothing but a Material UI component itself, but a styled version of it. This allows me to use all MUI related props in my JSX code as well.

import { Button } from "@material-ui/core";
import styled from "styled-components";

export const StyledButton = styled(Button)`
  &.MuiButton-root {
    border-radius: 5px;
    font-family: ${fonts.heebo};
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
  }
`;

Hope this might help.