Question

我有一个主题文件：

const theme = {
  colors: {
    dark: "#212121",
    normal: "#9E9E9E",
    light: "#EEEEEE"
  },
  typography: {
    textSize: "14px",
    subtitleSize: "28px",
    titleSize: "56px"
  }
};

export default theme;

我将他们传递到我的App组件中：

class App extends Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <Provider {...this.props.stores}>
          <Router>
            <AppStyles className="app-container">
              <Header />
              <Main />
            </AppStyles>
          </Router>
        </Provider>
      </ThemeProvider>
    );
  }
}

然后访问嵌套组件，如下所示：

const HeaderStyles = s.div`
  .link-icon {
    font-size: ${props => props.theme.typography.subtitleSize};
  }
  .header-link > a {
    font-size: ${props => props.theme.typography.textSize};
    color: ${props => props.theme.colors.normal};
    text-decoration: none;
  }
  .header-link .active-link {
    color: ${props => props.theme.colors.dark};
  }
`;

每次访问主题道具时，是否有比${props => props.theme.typography.textSize}更短的方式？

Answer 1

使用JS对象表示样式通常是为了保持样式模块化和作用域 - 这允许您将对象导入特定组件，然后使用＆＃39;样式传递对象。 dom元素的属性。你的用例似乎打败了这个目的。如果你想使用定义为JS对象的样式，我建议避免上面代码块中的间接。或者，考虑使用CSS模块或直接CSS。祝你好运！

样式化组件 - 访问传递主题属性的简便方法比$ {props =＆gt; props.theme ...}

1 个答案: