React가있는 CSS 아키텍처도 테마가 될 수 있습니다.

Question

현재 대형 React 앱을 만들고 있습니다. Css, 결코 나의 강한 점이 아니었다. 하지만 CSS에는 Reass와 함께 sass/cssNext/inline 스타일이 있습니다. 나는 Bass와 함께 Sass를 사용했지만 다른 응용 프로그램이 크게 성장해도 고장이 나기 시작합니다. 특히 기본 색상 체계 이외의 페이지를 "Re-skin"또는 "theme"할 수있는 능력이있는 경우

so - 누군가가 저에게 반응이있는 CSS를 만드는 입증 된 방법을 가르쳐 줄 수 있습니까? 규모가 매우 크며 사람들이 내 구성 요소를 빌려주기를 원할 때 커스텀 테마를 허용합니다. 예를 들어,

<MyComponent /> 
// this component has its styles but lets say Joe Schmoe wants be import 
// it? But, Joe wants to overlay his custom styles? 
// Is there a new paradigm that allows for an overlay or reskin within the component? 

심지어는 전체 응용 프로그램이 일정 시간 아래로 스킨 가능하다고 생각할 수도 있습니다. 나는 이것이 매우 기본적인 질문이라는 것을 알고 있습니다. 그러나 프로젝트를 구축 할 때마다 고통 포인트 또한 CSS 인 것처럼 보입니다. 그래서 나는 실제로 어떤 것이 효과적인지 알고 싶습니다.

Answer 1

이것은 최근까지 React 세계에서 해결 된 문제가 아니 었습니다.

저는 React 컴포넌트 라이브러리 인 ElementalUI의 관리자 중 한 명입니다. 지난 6-12 개월 동안 다양한 스타일링 방법을 시도해 왔습니다. (!) 당신이 이름을 짓고, 우리는 그것을 시도했습니다. (내 ReactNL keynote 동안 가장 인기있는 라이브러리에 대한 내 경험에 대해 이야기하고 그들이 고장난 곳)

문제는 현재의 스타일 라이브러리 중 어떤 것도 테마 지정 지원이 전혀 없다는 것입니다. 대부분 사용자 친화적 인 방식으로 해킹 할 수 있지만 구성 요소를 배포 할 때 원하는 것은 아닙니다. 맞습니까?

---

그래서 우리는 styled-components을 만들었습니다. styled-components은 많은 흥미로운 속성을 가지고 있으며, 그 중 하나는 테마가 라이브러리에 직접 내장되어 배포 가능한 구성 요소를 작성하기에 완벽한 선택임을 나타냅니다.

여기에 간단한 설명이 있지만, 모든 것을 설명하는 documentation을 살펴 보시기 바랍니다. 이 변수, Wrapper는 지금 구성 요소 반응 당신이 렌더링 할 수

import React from 'react'; 
import styled from 'styled-components'; 

// Create a <Wrapper> react component that renders a <section> with 
// some padding and a papayawhip background 
const Wrapper = styled.section` 
    padding: 4em; 
    background: papayawhip; 
`; 

:

// Use them like any other React component – except they're styled! 
<Wrapper> 
    <Title>Hello World, this is my first styled component!</Title> 
</Wrapper> 

(있는 경우

이

는 styled-components의 기본적인 사용법은 모습입니다 당신은 살아있는 놀이터가 될 이미지를 클릭하십시오.)

삽입 된 함수를 태그가 지정된 템플릿 리터럴에 전달하면 구성 요소에 전달 된 속성이 전달됩니다. 이 말은 소품에 적응할 수 있다는 것을 의미합니다 : 여기

import styled from 'styled-components'; 

const Button = styled.button` 
    /* Adapt the colors based on primary prop */ 
    background: ${props => props.primary ? 'palevioletred' : 'white'}; 
    color: ${props => props.primary ? 'white' : 'palevioletred'}; 

    font-size: 1em; 
    margin: 1em; 
    padding: 0.25em 1em; 
    border: 2px solid palevioletred; 
    border-radius: 3px; 
`; 

, 우리는 당신이 다른 같은 primary을 만들 수있는 Button 구성 요소 반응 만든 구성 요소 :

<Button>Normal</Button> 
<Button primary>Primary</Button> 

지금 온다 테마 측면. 의지에 상관없이, 그 ThemeProvider 내 상황에 얼마나 깊은 감사를 이제

import { ThemeProvider } from 'styled-components'; 

const theme = { 
    main: 'mediumseagreen', 
}; 

ReactDOM.render(
    <ThemeProvider theme={theme}> 
    <MyApp /> 
    </ThemeProvider>, 
    myElem 
); 

어떤 스타일의 구성 요소 : 우리는 당신에 theme을 전달하고 귀하의 응용 프로그램 (또는 응용 프로그램의 일부)를 포장 할 수 없습니다 ThemeProvider라는 구성 요소를 내보낼 이 theme을 소품에 삽입하십시오.

이것은 themable Button은 다음과 같은 형태가 될 것이다

import styled from 'styled-components'; 

const Button = styled.button` 
    /* Color the background and border with theme.main */ 
    background: ${props => props.theme.main}; 
    border: 2px solid ${props => props.theme.main}; 

    /* …more styles here… */ 
`; 

이제 Button은 통과 가져옵니다 theme을하고 그 기반으로 스타일의 변경됩니다! (defaultProps을 통해 기본값을 제공 할 수도 있습니다.)

이것이 바로 styled-components의 요지이며 배포 가능한 구성 요소를 구축하는 방법에 도움이됩니다!

우리는 현재 WIP doc about writing third-party component libraries을 가지고 있으며, 체크 아웃을 권장합니다. 물론 정상적인 문서도 좋은 읽을 거리입니다. 우리는 모든 기반을 다 커버하려 했으니, 당신이 싫어하는 것이 있거나 생각하지 못한 것이 있으면 즉시 알려주십시오. 우리는 토론 할 것입니다!

styled-components에 대한 다른 질문이 있으시면 언제든지 여기에 답장하거나 Twitter에 문의하십시오. (@mxstbr)

Answer 2

나는 무엇이 최선의 방법인지 모른다. 개인적인 취향과 더 흡사하다고 생각합니다. 나는 내가 사용하고있는 툴을 공유 할 것이다. 내가 사용하고있는 것은 css-modules이고 postcss이다.

css-modules는 각 CSS 클래스에 대한 전역 고유 이름을 사용하여 로컬 범위 식별자를 만들 수 있으며 모듈화되고 재사용 가능한 CSS를 사용할 수도 있습니다! postcss-modules-values을 사용하여 모든 설정 변수가 포함 된 글로벌 설정 파일을 만들 수도 있습니다. 그래서 당신은 귀하의 웹 사이트에 대한 테마를 변경할 수 있습니다.

다음은 구성 요소의 구조입니다. 각 구성 요소에는 유지 관리가 쉽거나 변경하기 쉬운 하나의 CSS 파일이 있습니다.

다음은 Button 구성 요소에 대한 코드입니다.

function Button(props) { 
    const className = props.className ? `${styles.button} ${props.className}` : styles.button; 

    return (
    <button disabled={props.disabled} className={`${className}`} type="button" onClick={props.onClick}> 
     {Children.toArray(props.children)} 
    </button> 
); 
} 

버튼 구성 요소의 클래스에서 다른 구성 요소를 전달할 수있는 구성 요소에 className이 있습니다. 따라서 누군가가 컴포넌트를 빌릴 때 버튼 스타일을 확장하거나 무시할 수 있습니다.

맞춤 설정이 가능한 웹 사이트를 만들어야하는 경우 맞춤 웹 사이트의 실시간 미리보기를 제공하는 Less.js을 사용하는 것이 좋습니다.