在样式化组件中使用扩展运算符

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样式复用

使用 ES6 扩展运算符反应道具语法 [重复]

Vue 3 + TypeScript:使用 JS 扩展运算符从 setup() 返回的对象在 vscode 中引发错误

Vue3样式引入和使用