Mathlive Virtual Keyboard에서 헤더에 있는 툴 중 undo, redo를 제거하는 작업을 맡았었다.
스타일링이나 라이브러리 옵션을 통해 쉽게 작업을 완료할 수 있을 줄 알았는데 생각보다 힘든 상황이 발생했어서 글로 정리하고자 한다.
문제 발생 상황 & 시도해본 방법
1. 특정 컴포넌트 module css에서 스타일링 적용 (ex .undo, redo { display: none; })
문제: 스타일링이 적용되지 않음
2. math-live 속성 중 editToolbar 값 수정
코드: window.mathVirtualKeyboard.editToolbar = 'none';
문제: undo, redo외에 클립보드 기능도 제거됨
팀원분께서는 요구사항은 undo, redo 제거이기 때문에 style로 해결해보라고 의견을 주셔서
1번 방안인 "특정 컴포넌트 Module css에서 스타일링 적용"이 잘 동작하지 않는 문제를 파악하려고 하였다.
배경 지식 & 문제 분석
- module.css를 사용하는 이유는 css 파일을 import하는 컴포넌트 에서만 자체적인 hash 값을 클래스에 지정해주어 중복적인 클래스 네이밍을 피하기 위해서이다.
- 수식 입력기 키보드는 math-field 태그에서 키보드 버튼을 클릭하였을 때 렌더된다.
- 수식 입력기 키보드는 math-live를 선언한 컴포넌트 내부에서 생기는게 아니라 최상위 body에서 생성된다.
math-live 라이브러리를 선언한 컴포넌트의 module css에서 해당 키보드 스타일링이 적용되지 않는 문제를 분석해보았다.
module css에서 선언되는 클래스명은 해시코드로 변환된다.
그러나 해당 수식 입력 키보드는 특정 아이콘을 클릭할 때 body 최상위에서 렌더되는 구조로 되어있어 해시된 클래스를 인식하지 못한다.
쉽게 말해 라이브러리에서는 .ML__edit-toolbar 라는 클래스로 선언되어 있는데 해당 클래스를 module css에서 접근하려고 하면 .hash값_ML__edit-toolbar으로 생성되어 접근이 되지 않는 것이었다.
해결 방안
해결해야 하는 문제는 다음 2가지이다.
- math-live를 선언한 컴포넌트 바깥에서 가상 키보드가 생성된다는 것
- 클래스에 해시가 생성되어 가상 키보드 클래스와 일치하지 않는다는 것
1. pure css로 스타일 선언
위 2가지 문제를 해결할 수 있는 가장 단순한 방법이다.
해시가 생성되지 않는 일반 css 파일에서 가상 키보드 클래스에 접근하면 된다.
/* style.css */
.ML__edit-toolbar.right {
div[data-command='"undo"'],
div[data-command='"redo"'] {
display: none;
}
}
그러나 일반 루트 css에 접근하면 안되는 이유가 있다.
수식 입력 키보드 관련한 컴포넌트는 특정 파일에 위치해있기 때문에 root에서 접근하면 안된다.
쉽게 말하자면, 수식 입력기의 스타일링이기 때문에 해당 컴포넌트 스코프 내에서 선언해야 된다는 의미이다.
2. :global 가상 선택자 사용
해당 컴포넌트 스코프 내에서 글로벌 스타일링을 적용하고 싶다면 :global 가상 선택자를 사용하면 된다.
:global 선택자를 사용하게 되면 module.css가 해시를 생성하지 않는다.
/* [component].module.css */
:global(.ML__edit-toolbar.right) {
div[data-command='"undo"'],
div[data-command='"redo"'] {
display: none;
}
}
내가 선언한 컴포넌트 스코프 내에서 스타일링을 선언한 수 있어 1번 방안의 문제를 해결할 수 있다!
요약
1. Mathlive Virtual Keyboard 커스텀하는 방법 = window.mathVirtualKeyboard.editToolbar = 'none'; -> 툴바 기능이 사라짐
2. 특정 컴포넌트 module css에서 선언한 스타일이 글로벌로 적용되지 않는 이유 = 컴포넌트에서 선언한 클래스에 hash값이 생성되기 때문
3. 해결방법 = module css가 아닌 pure css 파일에서 스타일 선언, :global 가상 선택자 사용
