我使用styled-components构建我的组件。接受自定义值的所有样式属性都会在我的组件中重复使用(应该如此)。考虑到这一点,我想使用某种全局变量,以便更新将传播到所有组件,而无需单独更新每个样式。
这样的事情:
// Variables.js
var fontSizeMedium = 16px;
// Section.js
const Section = styled.section`
font-size: ${fontSizeMedium};
`;
// Button.js
const Button = styled.button`
font-size: ${fontSizeMedium};
`;
// Label.js
const Label = styled.span`
font-size: ${fontSizeMedium};
`;
我想我的语法错误了吗?此外,我知道Javascript领域不推荐全局变量,但在设计中,组件之间的重用样式是绝对必要的。这里的权衡取舍是什么?
答案 0 :(得分:22)
在您的应用程序周围包裹<ThemeProvider>
可能会有所帮助:
https://www.styled-components.com/docs/advanced#theming
const theme = {
fontColour: 'purple'
}
render() {
return (
<ThemeProvider theme={theme}>
<MyApplication />
</ThemeProvider>
)
}
这将使所有子样式组件都能访问主题,如下所示:
const MyApplication = styled.section`
color: ${props => props.theme.fontColour}
`
或者
const MyFancyButton = styled.button`
background: ${props => props.theme.fontColour}
`
或通过https://www.styled-components.com/docs/advanced#getting-the-theme-without-styled-components
访问主题答案 1 :(得分:19)
我最终想出来了,所以这里有你怎么做,至少如果使用React。
您需要在一个文件中定义变量并导出它们。
GET
然后,您需要将这些变量导入每个组件文件。
// Variables.js
export const FONTSIZE_5 = '20px';
然后你可以使用样式组件中的变量,如下所示:
// Button.js
import * as palette from './Variables.js';
答案 2 :(得分:0)
您的最终解决方案有效的原因有两个:
16px
是无效值。需要将其包装在引号中以使其成为字符串(就像您对'20px'
所做的那样),或者需要删除px
。 我遇到了类似的情况,只是我需要将变量设为数字而不是字符串,而且这也可行:
const CELL_SIZE = 12;
const ROWS = 7;
const CELL_GAP = 3;
const BannerGrid = styled.div`
display: grid;
grid-template-columns: repeat(auto-fit, ${CELL_SIZE}px);
grid-template-rows: repeat(${ROWS}, ${CELL_SIZE}px);
grid-column-gap: ${CELL_GAP}px;
grid-row-gap: ${CELL_GAP}px;
grid-auto-flow: column;
`;