스타일 유틸리티가 있는 머티리얼 UI(MUI)의 스타일이 지정된 구성 요소

스타일 구성 요소에 이미 익숙하다면 MUI와 함께 사용할 수 있습니다. MUI와 함께 styled-component를 사용하기 위한 유틸리티styled()가 있습니다. MUI의 official documentation에는 styled() 유틸리티에 대한 예제가 충분하지 않습니다. 이 문서의 목적은 Javascript object syntax 및 CSS like syntax 모두와 함께 styled() 유틸리티의 충분한 예제를 제공하는 것입니다.

📑 목차

Basic

MUI Theme in the styled() Utility

Child Component and Child Element

Pseudo classes

Sibling Component

Props

기초적인

수입

// You must import 'styled' utility form mui
import { styled } from '@mui/material/styles';

// Also, you must import the components which you are gonna use with the styled utility
import Box from '@mui/material/Box';

JavaScript 개체 구문

JavaScript 개체 구문을 사용하여 styled() 유틸리티로 구성 요소를 만들어 보겠습니다.

const Basic = styled(Box)({

  backgroundColor: 'aliceblue',
  color: 'darkslategray',
  padding: '2rem',
  textAlign:'center'

})

Note:

• Here, we are using the Box component but instead of the Box component, we can use any other MUI component. We just need to import that component.
• Instead of a component we can also use an HTML tag. To use HTML tag, we have to put the HTML tag inside quote, styled('div').
• Here, the variable name is Basic. Always make sure that the first letter of the variable is capital because it will work like a component and a component name has to start with a capital letter.

CSS 유사 구문

JavaScript 객체 구문 대신 CSS와 유사한 구문을 사용할 수도 있습니다.

const Basic = styled(Box)`
  background-color: aliceblue;
  color: darkslategray;
  padding: 2rem;
  text-align: center;
`;

Note:

• Don't forget the backticks

• Semicolon after ending backtick is optional.

styled() 유틸리티의 MUI 테마

MUI의 default theme을 살펴보십시오.

JavaScript 개체 구문

const UsingTheme = styled(Box)(
  ({ theme }) => ({
    backgroundColor: theme.palette.primary.light,
    color: theme.palette.grey[900],
    padding: theme.spacing(2),
    textAlign: 'center',
    ...theme.typography.h6,
  })
)

다음 그림은 MUI 기본 테마를 보여줍니다. 그림에서 h6가 객체임을 알 수 있습니다. fontFamily , fontWeight , fontSize , lineHeight & letterSpacing 속성이 있습니다. 우리는 그들 모두를 원합니다. 따라서 우리는 그것을 파괴하고 있습니다( ...theme.typography.h6, ).



CSS 유사 구문

const UsingTheme = styled(Box)(
  ({ theme }) => `
  background-color: ${theme.palette.primary.light};
  color: ${theme.palette.grey[900]};
  padding: ${theme.spacing(2)};
  text-align: center;


  ${ /* here, we can't destructure like javascript object syntax. So, we need to manually access all the properties of 'h6'  */'' }

  font-size: ${theme.typography.h6.fontSize};
  font-weight: ${theme.typography.h6.fontWeight};
  font-family: ${theme.typography.h6.fontFamily};
  line-height: ${theme.typography.h6.lineHeight};
  letter-spacing: ${theme.typography.h6.letterSpacing};
 `,
)

자식 구성 요소 및 자식 요소

JSX

다음JSX을 원한다고 가정합니다.

<ParentComponent>

      <div>Hi</div>

     <Box className='childComponent'> Hello </Box>

</ParentComponent>

따라서 ParentComponent 구성 요소를 생성하고 자식 요소div 및 자식 구성 요소Box의 스타일도 지정해야 합니다.

JavaScript 개체 구문

const ParentComponent = styled(Box)(

  ({ theme }) => ({

    backgroundColor: theme.palette.primary.light,
    color: theme.palette.grey[900],
    padding: theme.spacing(2),
    textAlign: 'center',


    // Child element
    "> div": {
      backgroundColor: theme.palette.error.dark,
      color: theme.palette.grey[100]
    },


    // Child Component (We need to select the class or id which is used in the child component)
    "> .childComponent": {
      backgroundColor: theme.palette.success.dark,
      color: theme.palette.grey[100]
    },

  })
)

Note:

• I haven't found a way to select an MUI component without the class or an id that is used in that child component. If you know any way other, please write it down in the comment section.

CSS 유사 구문

const ParentComponent = styled(Box)(
  ({ theme }) => `
  background-color: ${theme.palette.primary.light};
  color: ${theme.palette.grey[900]};
  padding: ${theme.spacing(2)};
  text-align: center;


  ${ /* Child element  */'' }

  > div  {
    background-color: ${theme.palette.error.dark};
    color: ${theme.palette.grey[100]};
  };


  ${ /* Child Component (We need to select the class or id which is used in the child component)  */'' }

   > .childComponent {
    background-color: ${theme.palette.success.dark};
    color: ${theme.palette.grey[100]};
  };


 `,
)

의사 클래스

JSX

다음JSX을 원한다고 가정합니다.

<PseudoClasses>

      <div>Hi</div>

     <Box className='childComponent'> Hello </Box>

</PseudoClasses>

따라서 PseudoClasses 구성 요소를 생성해야 하며 의사 클래스를 사용하여 자식 요소div 및 자식 구성 요소Box의 스타일도 지정해야 합니다.

JavaScript 개체 구문

const PseudoClasses = styled(Box)(

  ({ theme }) => ({

    backgroundColor: theme.palette.primary.light,
    color: theme.palette.grey[900],
    padding: theme.spacing(2),
    textAlign: 'center',

    ":hover": {
      backgroundColor: theme.palette.primary.dark,
      color: theme.palette.grey[100],
    },

    ":active": {
      backgroundColor: theme.palette.warning.dark,
      color: theme.palette.grey[100],
    },


    // Pseudo select child element
    ":hover > div": {
      backgroundColor: theme.palette.error.dark,
    },


    // Pseudo select child component (We need to select the class or id which is used in the child component) 
    ":hover > .childComponent": {
      backgroundColor: theme.palette.success.dark,
    },

  })
)

CSS 유사 구문

const PseudoClasses = styled(Box)(
  ({ theme }) => `
  background-color: ${theme.palette.primary.light};
  color: ${theme.palette.grey[900]};
  padding: ${theme.spacing(2)};
  text-align: center;


  :hover {
    background-color: ${theme.palette.primary.dark};
    color: ${theme.palette.grey[100]};
  };


  :active {
    background-color: ${theme.palette.warning.dark};
    color: ${theme.palette.grey[100]};
  };


  ${ /* Pseudo select child element  */'' }

  :hover > div  {
    background-color: ${theme.palette.error.dark};
  };


  ${ /* Pseudo select child component (We need to select the class or id which is used in the child component)   */'' }

  :hover > .childComponent {
    background-color: ${theme.palette.success.dark};
  };


 `,
)

형제 구성 요소

JSX

다음JSX을 원한다고 가정합니다.

<>
  <MainComponent> Hello </MainComponent>
  <Box className='siblingComponent'> Hi </Box>
</>

따라서 MainComponent를 생성하고 형제 구성 요소Box의 스타일도 지정해야 합니다.

JavaScript 개체 구문

const MainComponent = styled(Box)(

  ({ theme }) => ({

    backgroundColor: theme.palette.primary.light,
    color: theme.palette.grey[900],

    // Adjacent Sibling Component (We need to use class or id of the Sibling component)
    "+ .siblingComponent": {
      backgroundColor: theme.palette.success.dark,
      color: theme.palette.grey[100]
    },

  })
)

Note:

• Instead of a sibling component, if there was a sibling HTML tag, we could have a style that too ("+ div").

• The adjacent sibling selector (+) is used to select an element that is directly after another specific element.

CSS 유사 구문

const MainComponent= styled(Box)(

  ({ theme }) => `
  background-color: ${theme.palette.primary.light};
  color: ${theme.palette.grey[900]};


  ${ /* Adjacent Sibling Component (We need to use class or id of the Sibling component) */'' }

   + .siblingComponent {
    background-color: ${theme.palette.success.dark};
    color: ${theme.palette.grey[100]};
  };

 `,
)

소품

JSX
TestingProp & dark 두 개의 props를 전달할 수 있는 구성 요소( border )를 원한다고 가정합니다. 두 소품의 값은 부울이며 이러한 소품의 값은 구성 요소의 스타일을 제어합니다.

   <>

   <TestingProps border={true} dark={true}>Hello
   </TestingProps>

  </>

따라서 TestingProps를 생성해야 하고 소품 dark 및 border에 대한 작업도 필요합니다.

JavaScript 개체 구문(MUI 테마 제외)

const TestingProps = styled(Box, {

    // Configure which props should be forwarded on DOM
   shouldForwardProp: (prop) => prop !== 'dark' && prop!== 'border'

   })

   (({ dark, border }) => ({

   backgroundColor: dark? "black" : "white",
   color: dark? "white" : "black",
   border: border? "1rem solid pink" : 'none'

   }));

What is this shouldForwaredProp?

We may already know that MUI5 uses emotion as a default style engine. This shouldForwardProp is coming from emotion. shouldForwaredProp is used to pass prop. In an example in the official documentation, shouldForwaredProp is used, you can check the example if you want.

CSS 유사 구문(MUI 테마 제외)

const TestingProps4 = styled(Box, {

  // Configure which props should be forwarded on DOM
  shouldForwardProp: prop => prop !== 'dark',

  })


  (({ dark, border }) => `

    background-color: ${dark? "black" : "white"};
    color: ${dark? "white" : "black"};
    border: ${border? "1rem solid pink" : 'none'}

  `);

JavaScript 개체 구문(MUI 테마 사용)

const TestingProps = styled(Box, {

   // Configure which props should be forwarded on DOM
  shouldForwardProp: (prop) => prop !== 'dark' && prop!== 'border'

  })

  (({ dark, border, theme }) => ({

  backgroundColor: dark? theme.palette.grey[900] : theme.palette.grey[100],
  color: dark? theme.palette.grey[100] : theme.palette.grey[900],
  border: border? `1rem solid ${theme.palette.primary.main}` : 'none'

  }));

CSS 유사 구문(MUI 테마 포함)

const TestingProps = styled(Box, {

   // Configure which props should be forwarded on DOM
   shouldForwardProp: (prop) => prop !== 'dark' && prop!== 'border'

  })


  (({ dark, border, theme }) => `

    background-color: ${dark? theme.palette.grey[900] : theme.palette.grey[100]};
    color: ${dark? theme.palette.grey[100] : theme.palette.grey[900]};
    border: ${border? `1rem solid ${theme.palette.primary.main}` : 'none'};

  `);

기본 소품 값

소품의 기본값을 전달할 수도 있습니다.

TestingProps.defaultProps = {
    dark: false,
    border: false
  }

그게 다야. 😃 읽어주셔서 감사합니다. 🎉