React J N 스타일 컴포넌트 5가지 꿀팁

스타일 컴포넌트 강의

https://github.com/DosImpact/styledCompoenets

DosImpact/styledCompoenets

스타일 컴포넌트 제대로 못쓰는것 같은데 쓰려고 하니 한계가 온다.. 배우고 쓰자..

• React J, N css코드 공유 가능.. 힘들겠다..

• SASS,Webpack 작업 시간

• 스타일컴포넌트 : Sass 코드를 짜고, React N 공유한다. ( React에서 CSS는 Js obj 이다.)

  1. Nesting : & 해서 참조하는것 | 컴포넌트도 가능하다 ${컴포넌트 이름}

const Button = styled.button`
  width: 100px;
  background-color: ${props => (props.danger ? `red;` : `green;`)};
`;
const Container = styled.div`
  justify-content: center;
  & ${Button}:nth-child(1) {
    background-color: coral;
  }
`;

2. Theme Provider

const theme = {
  mainColor: "#3498db",
  dangerColor: "#e74c3c",
  successColor: "#2ecc71"
};

export default theme;

------------------------------------------------ theme 정의 by obj

import styled, { keyframes, css, ThemeProvider } from "styled-components";
import theme from "./theme";



------------------------------------------------ 임포트후 프로바이더로 녹여
    <ThemeProvider theme={theme}>
      <Container>
        <Button>Hello</Button>
        <Button danger>Hello</Button>
        <Anchor danger>GO to </Anchor>
        <Input></Input>
        <Button>ONE</Button>
        <Button>TWO</Button>
      </Container>
    </ThemeProvider>
------------------------------------------------ 그후 props에 녹아든 theme을 꺼내써라.
    const Input = styled.input.attrs({ placeholder: "LALASF" })`
    color: ${props => props.theme.dangerColor};
    `;

• 3. mixin css만 따로 빼서, 이곳 저곳 적용시킬 수 있다.

import styled, { keyframes, css, ThemeProvider } from "styled-components";
------------------------------------------------ css``라고 정의하고
const awesomeShadow = css`
  box-shadow: 0 4px 6px black;
`;
------------------------------------------------ 해당 css 그냥 ${}로 넣어
const Button = styled.button`
  width: 100px;
  height: 200px;
  background-color: ${props => (props.danger ? `red;` : `green;`)};
  ${awesomeShadow}
`;

• 4. attrs 설정가능

const Input = styled.input.attrs({ placeholder: "LALASF" })`
  color: ${props => props.theme.dangerColor};
`;

• 5. withComponent 음... 해당 컴포넌트 스타일 유지한상태로 다른 컴포넌트로 체인지?

const Anchor = styled(Button.withComponent("a"))`
  text-decoration: none;
`;

 

 

DOS IMPACT - WEB Developer

KIM DO YOUNG

WEB : REACT JS | REACT NATIVE | GraphQL PRISMA