CSS를 적용하는 3가지 방법

1)Inline CSS

<Link to="/" style={{color:"black", textDecoration:"none"}}>

태그 안에 넣기

<Link>는 react-router-dom에서 import해온 태그로 인라인 css만 적용 가능하다 

 

 

 

2.external CSS

import './Home.css'

<div className="home">
  <img />
<div>

.home img {
    width:100px;
  }

따로 CSS 파일을 만들어 Import

className을 통해 범위를 지정한다.

-> css 파일이 전역적으로 작용하기에 실수로 className이 겹치면 전혀 다른 컴포넌트의 css가 적용될 수 있다

 

 

 

3.Styled Component

import styled from "styled-components";

const StyledButton = styled.div
`
  font-size: 1rem;
  background: ${(props) => props.background || "white"};
`;

function App() {
  return (
    <StyledButton background=black Î>
      hello world!
    </StyledButton>
  );
}

 

className 없이 컴포넌트를 지정하여 꾸밀 수 있으며

props를 통해 가변적인 스타일링이 가능하다.

 

 

https://www.daleseo.com/react-styled-components/

Styled Components로 React 컴포넌트 스타일하기

자세한 정보는 여기에

 

 

 

 

 

+

<A>
  <B>
    <img>
  </B>
</A>

const A = styled.div`img{width:100px;}`
const B = styled.div`img{width:50px;}`

위 경우 <img>와 가까운 <B>의 CSS가 적용될 것 같지만

의외로 A가 적용된다. 주의