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!

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

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访问主题以外的其他东西将访问样式组件的内部。

样式组件，在Render中使用主题变量

2 个答案: