[React] html 요소에 style 적용 시키기 // css 선택자

styled-components

import logo from './images/logo.png';

const HeaderContainer = styled.header`
  top: 4px;
  position: fixed;
  box-shadow: 0 1px 0 0 rgb(0 0 0 / 10%);

  @media (max-width: 1100px){
    height: 110px;
  }

  & li {
      height: 100%;
      padding: 0 5px;
    } 
`;

emotion을 사용해오다 media query 적용 방법이 styled-components이 더 편한 것을 알고 바꾸게 되었다. (역시 많이 사용하는건 이유가 있었다.)

HTML 요소에 바로 적용하기

<Button style={{ margintop: 'relative', marginRight: '10px' }}/>

style={} 안에 객체 형식으로 설정.

css 선택자

쉼표 , // 
h1, .special {
  color: blue;
}