JSS 활용 방법을 더 공부하고 적용하여 개선하기

[seongbin9786]

1. hover 등의 pseudo class 선택자 사용하는 방법
2. CSS를 재사용하는 방법 (withStyles와 연관하여)
3. Global CSS - 폰트 등

[seongbin9786]

hover 사용하는 방법

하위 속성으로

'&:hover': {
    //content
}

주면 됨

[seongbin9786]

글로벌 속성 주는 방법

1. 원리

   • 전역으로 적용됨
   • localized 않고 유지됨
     

2. 예제 코드

   // "image" won’t be namespaced
   const styles = {
   '@global': {
   image: { backgroundColor: 'red' },
   },
   };

[seongbin9786]

JSS-EXTEND 사용방법

const background = { backgroundColor: '#000' };

const styles = theme => ({
  button: {
    extend: [background, 'buttonBig'],
    width: 50,
  },
  buttonBig: {
    fontSize: 20,
  }
});

[seongbin9786]

function을 CSS 규칙으로 사용하는 방법

1. withStyles를 사용하면 CSS 규칙을 function으로 사용할 수 있다.
2. (ex) button: props => ({ backgroundColor: props.backgroundColor })
3. 보통 defaultProps로 기본 값을 준다.
4. CSS 규칙은 최초 Mount 혹은 props가 갱신될 때 같이 갱신된다.