javascript - Styled components workflow in Mui - how to style - Stack Overflow

admin管理员组

文章数量:1302273

I am working on a new react project and using material ui with styled ponents and having some trouble with styling and organization. I've read up on styled ponents 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 ponents for each time some css needs to be added and storing all these ponents 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 ponents for everything
• to make a wrapper styled ponents around the main react ponent 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 ponents 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 ponents as regular ponents, have them in separate files and everything. A ponent is a ponent, no longer needing to distinguish between stlying and ponentization

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 ponents for big projects?

I am working on a new react project and using material ui with styled ponents and having some trouble with styling and organization. I've read up on styled ponents 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 ponents for each time some css needs to be added and storing all these ponents 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 ponents for everything
• to make a wrapper styled ponents around the main react ponent 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 ponents 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 ponents as regular ponents, have them in separate files and everything. A ponent is a ponent, no longer needing to distinguish between stlying and ponentization

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 ponents for big projects?

• javascript
• reactjs
• material-ui
• styled-ponents

Share Follow asked Jul 22, 2022 at 10:21 minefield_testerminefield_tester 10311 gold badge33 silver badges1313 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3 +50

Material UI and styled-ponents 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-ponent will help organise your custom css

styled-ponent 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 ponents of your project. and style.js inside your ponent folder for styles dedicated to that ponent only.

To get most out of using CSS in JS pattern (in your case it is styled-ponent) you should use it with styled-system it will help you easily make your ui ponents responsive with minimum code and help build best re-usable ponents 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-ponents';
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>

In my project I have used something like this. I have used ponents ing from Material UI and passed it into styled-ponents 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 ponent returned from this file is nothing but a Material UI ponent 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-ponents";

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.

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

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

I think you can create your own styled ponent with your customized styles and use some MUI classes to your ponent

本文标签： javascriptStyled components workflow in Muihow to styleStack Overflow