[CSS] 자주사용하는 css 모음

• material-ui-palette

적용하는 방법은 component, tagname에 설정

const Button = styled.button`

`;

const button = styled(Button)`
`;

변수도 설정이 가능

const padding = '3em'

const Section = styled.section`
  color: white;

  /* Pass variables as inputs */
  padding: ${padding};

  /* Adjust the background from the properties */
  background: ${props => props.background};
`;

styled-components 정리

display: flex;
justify-content: flex-end; // 오른쪽으로 붙이기

// 여백
margin-top: 3rem;
margin-bottom: 3rem;
margin-right: 3rem;
margin-left: 3rem;

// 크기
width: 100%

// 글자
font-size: 1rem;


// input
border: none;


  // font-size: 1rem;
  // align-items: center;
  // border: none;
  // padding-left: 3em;
  // &:focus {
    // color $oc-teal-7;
    // border-bottom: 1px solid ${palette.gray[7]};
  // }
  // margin-bottom: 3rem;
  // margin-right: 3rem;
  // margin-left: 3rem;


  // margin-bottom: 3rem;
  // margin-right: 3rem;
  // margin-left: 3rem;


  // display: flex;
  // justify-content: flex-end;
  // margin-top: 3rem;
  // align-items: center;
  // position: fixed;
  // width: 500;
  // background: gray;
  // box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);