반응 도구 상자의 구성 요소에 테마 적용 방법

Question

반응하고 반응하는 도구 상자가 새로 도입되었습니다. 반응 도구 상자는 scss를 사용합니다. 나는 scss를 아직 모르지만 그 구성 요소의 커스터마이징 문제에 직면 해있다.

이 내가 가진 것입니다 : 그것은 탐색 구성 요소

<AppBar fixed flat title="Webocity" className="appBar"> 
    <Navigation type='horizontal' className="navbar" routes={linkroutes}> 
     </Navigation> 
    </AppBar> 

appbar 구성 요소입니다.

appbar 구성 요소에 CSS 클래스를 적용 해 보았습니다.

그러나 탐색 구성 요소의 className이 작동하지 않아 그 이유를 알고 싶습니다. AppBar에 대해 작동하고 Navigation에 대해 작동하지 않는 이유는 무엇입니까? 또한 appBar CSS에 대해서는 background 속성이 재정의되었지만 height 속성보다 우선합니다. 왜 그런가요?

또한 어떻게 이러한 구성 요소에 테마를 전달합니까? SCSS 파일로 작성해야한다는 것을 이해합니다. 그러나 나는 그것에 대한 아주 간단한 예가 될 수 있을까?

import theme from './PurpleAppBar.scss'; 

const PurpleAppBar = (props) => (
    <AppBar {...props} theme={theme} /> 
); 

export default PurpleAppBar; 

을하지만 PurpleAppBar.scss이며, 그것이 무엇과 같아야합니다

문서는 보여줍니다? 사용자 정의 SCSS 파일이라고 생각합니까?

또한 웹 앱으로 작업 중이므로 material-ui는 나에게 좋은 옵션이 아닙니다. 웹 앱 반응에 UI를 향상시키는 데 더 좋은 점이 있습니까?

Answer 1

React Toolbox는 CSS 모듈을 사용하여 구성 요소의 스타일을 내부적으로 지정하며 사용하는 것이 좋습니다. 반응 도구 상자의 각 구성 요소는 상태에 따라 각 DOM 노드에 할당되는 classNames API를 구현합니다. 문서에서 API를 볼 수 있습니다.

theme 속성은 최종 클래스와 className이 일치하는 className api를 구현하는 모양입니다. CSS 모듈이 있다고 가정하면 { button: 'MyButton--button__1262a' }과 같은 객체에서 해결됩니다. 해당 객체를 구성 요소에 제공하여 className 버튼을 가져 와서 해당 노드에 설정할 수 있습니다. 선택기 우선 순위에 유의하십시오. 때로는 우선 순위를 높여야 할 수도 있으며, className을 사용자 지정 구성 요소의 루트에 추가하기 만하면됩니다. 문서에는 많은 예제가 있으며 예제 repo도 확인할 수 있습니다.

CSS 모듈을 사용하지 않으려는 경우에도 모듈의 하드 코딩 테마를 구현할 수 있습니다. 예를 들어, CSS에 .awesome-button 클래스를 쓰고 싶다면, { button: "awesome-button" }이라는 테마 객체를 전달하면됩니다. 자세한 내용은 react-css-themr을 참조하십시오.