리액트의 인라인 스타일링 ! React Inline Styling

import { makeStyles } from '@material-ui/styles';

const useStyles = makeStyles(theme => ({
  root: {},
  row: {
    height: '42px',
    display: 'flex',
    alignItems: 'center',
    marginTop: theme.spacing(1)
  },
  spacer: {
    flexGrow: 1
  },
  importButton: {
    marginRight: theme.spacing(1)
  },
  exportButton: {
    marginRight: theme.spacing(1)
  },
  searchInput: {
    marginRight: theme.spacing(1)
  }
}));         // 인라인 스타일 

const UsersToolbar = props => {
  const { className, ...rest } = props;

  const classes = useStyles(); // 변수에 styles 할당

  return (
    <div
      {...rest}
      className={clsx(classes.root, className)}  // 실제 할당 된 styles 사용 classes.xxx 로 사용할 수 있다.

    >
   );
}

 

Material-UI 컴포넌트 사용 여부에 관계없이 앱에서 Material-UI 스타일링 솔루션을 사용할 수 있습니다.

Material-UI가Carbon을 통해지속 가능한 조직광고를구축하도록 지원

Material-UI는 동적 UI를 구축하기위한 강력한 기반을 제공하는 것을 목표로합니다. 간단하게하기 위해, 우리는 재료-UI 구성 요소에 사용되는 스타일 솔루션 노출 은 AS @material-ui/styles패키지를. Material-UI는 다른 모든 주요 스타일링 솔루션 과 상호 운용 이 가능하기 때문에 사용할 수는 있지만 꼭 그럴 필요는 없습니다 .

Material-UI의 스타일링 솔루션을 사용하는 이유는 무엇입니까?

이전 버전에서 Material-UI는 구성 요소 스타일을 작성하기 위해 사용자 정의 인라인 스타일 솔루션 인 LESS를 사용했지만 이러한 접근 방식은 제한적인 것으로 입증되었습니다. CSS-in-JS 솔루션을 채택했습니다 . 그것은 많은 훌륭한 기능 (테마 중첩, 동적 스타일, 자체 지원 등)을 잠금 해제 합니다. 우리는 이것이 미래라고 생각합니다.

• 통합 스타일링 언어
• SCSS (Sass)를 CSS-in-JS로 변환

Material-UI의 스타일링 솔루션은 스타일 구성 요소 및 감정 과 같은 다른 많은 스타일링 라이브러리에서 영감을 얻었습니다 .

• 💅 구성 요소 와 동일한 장점 을 기대할 수 있습니다 .
• 🚀 빨리 타 오르고 있습니다.
• API 플러그인 API 를 통해 확장 할 수 있습니다 .
• ⚡️ 런타임에서 서버 측에서 작동하는 고성능 JavaScript-CSS 컴파일러 인 JSS 를 핵심으로 사용 합니다.
• KB 15KB 미만 gzipped ; Material-UI와 함께 사용하면 번들 크기가 증가하지 않습니다.

 출처 : https://material-ui.com/styles/basics/

@material-ui/styles - Material-UI

 

Material-ui/styles 중 makeStyle 라는 속성을 이용해서 inline component를 만들어 봤습니다.

생각 보다 엄청 편했습니다. scss를 사용하다가 처음으로 inline component를 사용해 봤는데 

 

example ) scss : margin-top => inlinecomponent : marginTop 이러한 미묘한 차이말고는 엄청 편하다고 생각합니다.