reactjs - 样式化的组件算术运算

Question

我在这里有一个演示

它是一个简单的反应应用程序，我在其中使用带有主题的样式化组件

主题就像

import { DefaultTheme } from "styled-components";

export const theme: DefaultTheme = {
  sizes: {
    height: "50px",
    width: "50px"
  }
};

是否可以在样式组件中将主题值与算术运算一起使用

所以像

height: ${({ theme }) => theme.sizes.height}+
    ${({ theme }) => theme.sizes.height};
    

这在我的演示中不起作用，但我不知道语法是不正确还是不可能。

标签： reactjsstyled-components

Answer 1

要应用这个，你的主题应该是这样的，道具将是数字，而不是字符串。

export const theme: DefaultTheme = {
  sizes: {
    height: 50,
    width: 50
  }
};

所以你现在可以设置你的高度。

height: ${({ theme }) => theme.sizes.height + theme.sizes.height};