React와 Redux를 사용하여 웹 응용 프로그램의 테마를 전환하는 가장 좋은 방법은 무엇입니까?

내 React 및 Redux 웹 응용 프로그램에서 두 테마를 전환하는 옵션을 구현하고 싶습니다.React와 Redux를 사용하여 웹 응용 프로그램의 테마를 전환하는 가장 좋은 방법은 무엇입니까?

각 테마마다 2 가지 CSS 파일이 있습니다. 지금은 CSS 파일의 스타일을 적용하기 위해 간단히 내 App.js 헤드로 가져옵니다.

import '../styles/theme1.css'; 

const App = (props) => { 
    return (
     <div> 
     <Header /> 
     <Container/> 
     </div> 
    ); 
}; 

const mapStateToProps = (state) => ({ 
    theme: state.settings.theme // can return 'theme1'/'theme2' 
}); 

export default withRouter(connect(mapStateToProps)(App));

그래서 나는 앱의 상태 ('THEME1'또는 'THEME2')에 따라 stylings가를 가져올.
나는 지저분한 방법을 생각해 볼 수 있고 기성품 패키지를 발견했지만, 그렇게 할 수있는 일반적인 방법이 있는지, 가능한 한 깨끗하고 효율적인지 알고 싶습니다.

이것은 작성 - 반응 - 응용 프로그램 키트입니다.

감사합니다.

출처

2017-10-26 Amiry

이 질문은 의견이 너무 광범위하거나, 의견이 있거나 토론이 필요하므로 주제를 벗어났습니다. 구체적이고 신뢰할 수있는 프로그래밍 문제가있는 경우 자세한 정보를 제공해주십시오. –

@Paulie_D 내 질문을 편집했습니다. 문제가 계속되면 알려주세요. – Amiry

1 행의 일치하지 않는 작은 따옴표 문자가 여기에 코드를 입력하는 데 오타가 있습니까? 문제의 일부인 경우에 대비하여 "수정"하고 싶지 않습니다. (이것이 구문 강조가 매우 유용한 이유입니다.) –

scss/sass를 사용해보세요. 전체 프로세스를 단순화 할 수 있다고 생각합니다. 클래스/요소를 중첩 할 수 있기 때문입니다.

예를 들어, 두 상태 사이를 전환 가정 할 수 있습니다, THEME1 및 THEME2 :

<div className={this.state.theme}> 
    <h2>Some text</h2> 
</div>

그리고 당신의 .scss 파일은 taskrunner 구성 방법에 따라

.theme1{ 
    background-color: black; 

    h2 { 
     color: white; 
    } 
} 

.theme2{ 
    background-color: white; 

    h2{ 
    color: black; 
    } 
}

출처

2017-10-26 12:00:33 krmzv

scss 파일을 사용하려면 CSS로 컴파일해야합니다. 지금 내 컴파일 된 CSS에서 신체 요소를 타겟팅하는 데 문제가 있습니다. .theme1 body {background-color : blue; } 예를 들어, 작동하지 않습니다. – Amiry

.theme1 body {...}처럼 body 요소를 중첩 할 수 없습니다. 대신 클래스에 의해서만 몸체를 대상으로 시도하십시오. – krmzv

'수업을 통해서만 시체를 타겟팅 하시겠습니까?' 시체를 타겟팅하고 모든 테마에 대해 다른 배경을 부여하려면 어떻게해야합니까? – Amiry

하나의 가능성과 같아야합니다 설정은 React-Helmet을 소개하는 것이므로 테마에 따라 <head>에서 CSS 참조를 변경할 수 있습니다.

import React from "react"; 
import {Helmet} from "react-helmet"; 

function StyleSwitch (props) { 
    return (
    <Helmet> 
     <link rel="stylesheet" href={props.stylesheet} /> 
    </Helmet> 
); 
};

출처

2017-10-26 13:26:15 davemaloney

내 create-react-app에서 작동하지 않습니다. – Amiry

React와 Redux를 사용하여 웹 응용 프로그램의 테마를 전환하는 가장 좋은 방법은 무엇입니까?

답변

관련 문제