React. Part2. ch2. 02-1. styled-components

https://styled-components.com/docs/basics#getting-started

 

import "./styles.css";
import React from "react";
import StyledComponentsExample from "./components/StyledComponentsExample";
import styled from "styled-components";

const Thing = styled.div.attrs((/* props */) => ({ tabIndex: 0 }))`
  color: blue;

  /* &는 자기 자신을 의미한다. */
  &:hover {
    color: red; // <Thing> when hovered
  }

  & ~ & {
    background: tomato; 
    // <Thing> as a sibling of <Thing>, 
    // but maybe not directly next to it
    // 자기 자신을 뒤따르는 모든 형제
  }

  & + & {
    background: black; // <Thing> next to <Thing>
  }
  /* & + & 가 적용되어야 하나, .something가 아래에 있어 아래 것 우선 적용 */
  &.something {
    background: orange; // <Thing> tagged with an additional CSS class ".something"
  }
  /* &가 바로 오지 않으면 <Thing> 외에 다른 태그의 클래스명이고,
  그 아래 자기 자신(&)에 적용한다.
  */
  .something-else & {
    border: 1px solid; // <Thing> inside another element labeled ".something-else"
  }
`;
export default function App() {
  return (
    <React.Fragment>
      <Thing>Thing - Hello world!</Thing>
      <Thing>Thing - How ya doing?</Thing>
      <Thing>Thing - How ya doing???</Thing>
      <Thing className="something">Thing - Class - The sun is shining...</Thing>
      <div>div - Pretty nice day today.</div>
      <Thing>Thing - Don't you think?</Thing>
      <div className="something-else">
        <Thing>div - class - Thing - Splendid.</Thing>
      </div>
    </React.Fragment>
  );
}

 

○ 스타일 tag로 만들면서 input tag로 생성시킬 수 있다.

Note how the inputColor prop is not passed to the DOM, but type and defaultValue are. That is styled-components being smart enough to filter non-standard attributes automatically for you.

// Create an Input component that'll render an <input> tag with some styles
const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  color: ${props => props.inputColor || "palevioletred"};
  background: papayawhip;
  border: none;
  border-radius: 3px;
`;

// Render a styled text input with the standard input color, and one with a custom input color
render(
  <div>
    <Input defaultValue="@probablyup" type="text" />
    <Input defaultValue="@geelen" type="text" inputColor="rebeccapurple" />
  </div>
);

 

○ [기존] 외부 css 파일 적용

import React from 'react'
import styles from './styles.css'

export default class Counter extends React.Component {
  state = { count: 0 }

  increment = () => this.setState({ count: this.state.count + 1 })
  decrement = () => this.setState({ count: this.state.count - 1 })

  render() {
    return (
      <div className={styles.counter}>
        <p className={styles.paragraph}>{this.state.count}</p>
        <button className={styles.button} onClick={this.increment}>
          +
        </button>
        <button className={styles.button} onClick={this.decrement}>
          -
        </button>
      </div>
    )
  }
}

 

○ [styled-compt 방식] 

import React from 'react'
import styled from 'styled-components'

const StyledCounter = styled.div`
  /* ... */
`
const Paragraph = styled.p`
  /* ... */
`
const Button = styled.button`
  /* ... */
`

export default class Counter extends React.Component {
  state = { count: 0 }

  increment = () => this.setState({ count: this.state.count + 1 })
  decrement = () => this.setState({ count: this.state.count - 1 })

  render() {
    return (
      <StyledCounter>
        <Paragraph>{this.state.count}</Paragraph>
        <Button onClick={this.increment}>+</Button>
        <Button onClick={this.decrement}>-</Button>
      </StyledCounter>
    )
  }
}