React

React Component Styling

Styled Components

npm i styled-components

import styled, { css } from "styled-components";

const StyledButton = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 20px;
  
  ${(props)=>props.primary && 
  css `
    background: palevioletred;
    color: white;
  `}
`;

export default StyledButton;

import styled from "styled-components";
import "./App.css";
import StyledButton, {createGlobalStyle} from "./components/StyledButton";


// 새로운 css 로 설정하기
const PrimaryStyledButton = styled(StyledButton)`
  background-color: palevioletred;
  color: white;
`;

const UppercaseButton = (props) => <button {...props}/>;

const MyButton = (props)=> (
  <button className={props.className} children={`MyButton ${props.children}`} />
);

const StyledMyButton = styled(MyButton)`
  background: transparent;
  border-radius: 3px;
  border: 2px solid ${(props)=> props.color || "palevioletred"};
  color: ${(props)=> props.color || "palevioletred"};
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 20px;
  
  :hover {
    border: 2px solid red;
  }
  
  ::before {
    content: "@";
  }
`;

const GlobalStyle = createGlobalStyle`
 button {
   color: yellow;
 }
`;

function App() {
  return (
    <div className="App">
      <GlobalStyle/>
      // 1. 기본적인 사용
      <StyledButton>버튼</StyledButton>
      
      // 2. props 넘겨주기
      <StyledButton primary>버튼</StyledButton>
      
      // 3. 새롭게 만들어 설정해주기
      <PrimaryStyledButton>버튼</PrimaryStyledButton>
      
      // 다른 태그처럼 사용하기
      <StyledButton as="a" href="/">버튼</StyledButton>
      
      // 새롭게 만들어진 버튼에 props 전달해서 as 로 사용하기
      <StyledButton as={UppercaseButton}>button</StyledButton>
      
      <StyledMyButton>button</StyledMyButton>
      
      <StyledMyButton color="green">button</StyledMyButton>
    </div>
  );
}

export default App;

attrs

import styled form "styled-components";

const StyledA = styled.a.attrs((props) => ({
  target: "_BLANK",
}))`
  color: ${(props) => props.color};
`;

export default StyledA;

React Shadow

• Shadow DOM

npm i react-shadow

import root from 'react-shadow'

const styles = `
  background-color = grey;
`;

<root.div>
  <div className= "App">
   ...
  </div>
<style type="text/css">{styles}</style>
</root.div>

• 한정적으로 css를 적용해 줄 수 있고 다른 곳에서 제어하지 못하도록 할 수 있다.

Ant Design

• 디자인 되어있는 component 사용하기!

npm i antd

• index.js 에 antd.css 연결하기

import 'antd/dist/antd.css';