Styled-component，在 Render 中使用主题变量

Question

我知道我们可以像这样使用主题变量：

const Button = styled.button`    
   cursor: pointer;
   border-radius: ${props => props.theme.borderRadiusSize};
   dir: ${props => props.theme.dir}
   outline: none;               
`;

以上有效。我需要做的不仅仅是改变风格，还有一些主题变量。例如：

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

我尝试像这样使用 props 中的 theme 对象：

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

但是 theme 道具未定义。

我可以使用父 <ThemeProvider/> 传递的 theme 对象吗？我不想使用全局状态。

Answer 1

看起来不喜欢 styled-components 为您提供了一种访问主题的简便方法。看起来你可能想使用 React context 或其他一些全局配置，如果它确实是这样的话。从 ThemeProvider 访问主题而不是样式将访问 styled-components 的内部。

Answer 2

我找到了解决方案。 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);

Styled-component，在 Render 中使用主题变量

Styled-component, using theme variables in Render

themes

reactjs

styled-components