스타일이 적용된 구성 요소, 사용 테마 변수에 나는 우리가이 같은 테마 변수를 사용할 수 있다는 것을 알고

Question

을 렌더링합니다. 테마 변수를 사용하여 스타일을 변경하는 것 이상을해야합니다. 예 :이 같은 props에서 theme 객체를 사용하려고

if (theme.dir === 'rtl') 
    do some stuff more in render! 

:

const {theme} = this.props; 
if (theme.dir === 'rtl') 
    do some stuff more in render! 

그러나 theme 소품은 정의되지 않습니다.

theme 부모로부터 전달 된 객체 <ThemeProvider/>을 사용할 수 있습니까? 전 세계적인 상태를 사용하고 싶지 않습니다.

Answer 1

해결책을 찾았습니다. Here은 문서입니다.

는 이전에 나는이 같은 일을했다 :

import React from 'react'; 
import PropTypes from 'prop-types'; 
import styled from 'styled-components'; 


class Component extends React.Component { 

    render() { 
    const { 
     theme 
    } = this.props; 

    console.log('Current theme: ', theme); // Gets undefined 

    ... 

    return (
     ... 
    ) 
    } 

} 

export default Component; 

내가이 변경 :

import React from 'react'; 
import PropTypes from 'prop-types'; 
import styled, {withTheme} from 'styled-components'; 


class Component extends React.Component { 

    render() { 
    const { 
     theme 
    } = this.props; 

    console.log('Current theme: ', theme); // Gets theme object 

    ... 

    return (
     ... 
    ) 
    } 
} 

export default withTheme(Component); 

Answer 2

스타일이 좋아 보이지 않습니다. 테마 구성 요소를 사용하면 테마에 쉽게 액세스 할 수 있습니다. 당신이 어쩌면 React context 또는 다른 전역 설정을 사용하고자하는 것처럼 보입니다. ThemeProvider에서 스타일이 아닌 다른 것으로 테마에 액세스하면 스타일이 지정된 구성 요소의 내부에 액세스하게됩니다.