styled된 스타일 override

리린이는 급하게 video.js 에서 자막파일도 없이 화면에 문자열을 overlay 하라는 명을 받았다. createDialog 사용했더니 스타일이 맞지 않아서 오버라이드 필요했음.

일반 스타일 대체

원문

css 우선순위는 더 구체적인 게 우선순위. 그래서 자기 자신을 선택하는 & 으로 자시자신-아이디 를 여러게 생성해준다.

const ColorChanger = styled.section`
  background: papayawhip;
  color: palevioletred;

  @media(min-width: 768px) {
    background: mediumseagreen;
    color: papayawhip;
  }
`;

const ColorChangeNew = styled(ColorChanger)`
&&& {
  background: red;
  color: blue;
}
`

클래스 개수가 많아져서 우선순위가 높아졌음.

.ColorChanger-asdf123.ColorChanger-asdf123.ColorChanger-asdf123 {
  background: red;
  color: blue;
}

인라인 스타일 대체

원문

인라인은 위 방법이 안 통한다. 아래처럼 하기.

const PlayerWrapper = styled.div`
  .player,
  .player .video-js {
    position: relative;
    width: 100%;
    max-width: 100%;
  }

const MainPlayerWrapper = styled(PlayerWrapper)`
  & .vjs-modal-dialog-content:before {
     display: none;
  }
  & .vjs-close-button{
    display: none;
  }
  & .vjs-modal-dialog .vjs-modal-dialog-content {
    background-color: black;
    display: table-cell;
    vertical-align: middle;
    font-size: 1em;
    padding: 0 1em; }