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

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

它看起来不像 styled-components 为您提供了一种访问主题的简单方法。看起来你可能想要使用 React context 或其他一些全局配置，如果它真的是这样的话。从 ThemeProvider 访问主题以获取样式以外的内容将访问样式组件的内部。