styled-component 연습

컴포넌트 기반 CSS 작성에 적합한 Styled-Component

import styled from "styled-components";

// <h1> 태그를 렌더링 할 title component를 만듭니다.
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: teal;
`;

// <section> 태그를 렌더링 할 Wrapper component를 만듭니다.
const Wrapper = styled.section`
  padding: 4em;
  background: tomato;
`;
const Siv = styled.button`
  background: ${(props) => (props.red ? "palevioletred" : "white")};
  color: ${(props) => (props.red ? "teal" : "palevioletred")};
  font-size: 1.5em;
  /* color: blue; */
`;
const Form = styled.section`
  background-color: blue;
  width: 40px;
`;
const Input = styled.input`
  width: 100px;
`;

export default function App() {
  // 일반적으로 컴포넌트를 사용하는 것처럼 Title과 Wrapper를 사용하시면 됩니다!
  return (
    <Wrapper>
      <Title>Hi soyoung</Title>
      <Siv>click</Siv>
      <Form>
        <Input type="text" value="여기에적어요"></Input>
      </Form>
      <Siv red>클릭</Siv>
    </Wrapper>
  );
}

 

passed props

import styled from "styled-components";

// Styled Component로 만들어진 Input 컴포넌트 입니다.
const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  /* color: ${(props) => props.inputColor || "red"}; */
  background: ${props => props.backgroundColor || "white"};
  border: none;
  border-radius: 3px;
  color: ${(props) =>props.inputColor }

`;

export default function App() {
  return (
    <div>
      {/* 아래 Input 컴포넌트는 styled component인 Input 컴포넌트에 지정된 inputColor(red)가 적용되었습니다.  */}
      <Input defaultValue="김코딩" type="text" />
      {/* 아래 Input 컴포넌트는 props로 전달된 커스텀 inputColor(blue)가 적용되었습니다. */}
      <Input defaultValue="박해커" type="text" inputColor="red" backgroundColor = "teal"/>
      <Input defaultValue="박소영" type="text" inputColor = "teal" backgroundColor = "blue"/>
    </div>
  );
}