在样式化组件中使用扩展运算符
Posted
技术标签:
【中文标题】在样式化组件中使用扩展运算符【英文标题】:Using the spread operator in styled components 【发布时间】:2019-04-12 02:31:20 【问题描述】:是否可以在 React Native 中将扩展运算符与样式组件一起使用?
我有这个组件:
const StyledHeaderText = styled.Text`
fontFamily: $props => props.theme.font;
fontSize: $props => props.theme.fontSizeSubtitle;
color: $props => (props.lightMode) ? props.theme.fontColor : props.theme.fontPrimaryColor
`;
但是可以说,在我的主题中,我有一个同时具有 fontFamily 和 fontSize 的对象,并且我在整个应用程序中重复使用。我想知道我是否可以做这样的事情,目前它不起作用:
const StyledHeaderText = styled.Text`
...$props => props.theme.fontHeader;
color: $props => (props.lightMode) ? props.theme.fontColor : props.theme.fontPrimaryColor
`;
这对于在 ios 中设置海拔也很有用,因为我必须设置 4 种样式。
谢谢
【问题讨论】:
【参考方案1】:您可以使用 css helper function 生成特定的 css 并将其作为模板文字返回。
import styled, css from 'styled-components/native'
const GlobalStyles = css`
fontFamily: $props => props.theme.font;
fontSize: $props => props.theme.fontSizeSubtitle;
`
const StyledHeaderText = styled.Text`
$GlobalStyles
// Other Styles
`
或有条件地为
const StyledHeaderText = styled.Text`
$props => props.theme.fontHeader ? GlobalStyles : 'fontSize: 14'
// Other Styles
`
【讨论】:
太好了,这似乎是我需要的。让我试试这个,我会给你答案。【参考方案2】:您也可以直接从插值函数返回对象,它们将被视为内联样式。
const StyledHeaderText = styled.Text`
$props => (...props.theme.fontHeader);
color: $props => (props.lightMode) ? props.theme.fontColor props.theme.fontPrimaryColor
`;
或
const StyledHeaderText = styled.Text`
$props => props.theme.fontHeader;
color: $props => (props.lightMode) ? props.theme.fontColor props.theme.fontPrimaryColor
`;
更多详情:reference
【讨论】:
有没有人能让这个工作?它对我不起作用。【参考方案3】:要扩展之前的答案,您还可以执行以下操作:
import styled, css from 'styled-components/native'
// with theme
const GlobalStyles = css`
fontFamily: $ (theme) => theme.font ;
fontSize: $ (theme) => theme.fontSizeSubtitle ;
`
// Without theme using inherited props
const GlobalStyles = css`
fontFamily: $ (font) => font ;
fontSize: $ (fontSizeSubtitle) => fontSizeSubtitle ;
`
// if you wanted it to be conditional
const GlobalStyles = css`
fontFamily: $ (font) => font || 'roboto' ;
fontSize: $ (fontSizeSubtitle) => fontSizeSubtitle || '14px' ;
`
const StyledHeaderText = styled.Text`
$GlobalStyles
// Other Styles
`
// same can also be done with regular styled components:
export const HeaderText = styled.p`
fontSize: $ (fontSizeSubtitle) => fontSizeSubtitle || '14px' ;
`
// Useage would be in your component would be like:
import react from react;
import HeaderText from '../component/styles'
export const FooComponent = memo(( destructuredProps ) =>
// some other code
return (
<>
<HeaderText className=fooClass fontSize='18px'> Here's my sample text! </HeaderText>
<>
));
【讨论】:
以上是关于在样式化组件中使用扩展运算符的主要内容,如果未能解决你的问题,请参考以下文章
TypeScript:为样式化的组件元素扩展 React 组件道具
小程序开发-10-新版Music组件组件通信与wxss样式复用