对象符号中的条件样式组件

若昂·贝洛

样式组件文档没有提到这种情况,我无法弄清楚语法。

我将如何转动这个样式组件:

const StyledButton = styled.button`
  color: red;
  ${props => props.disabled && css`
    color: grey;
    background-color: grey;
  `}
`

转化为对象符号:

const StyledButton = styled.button(props => ({
  color: 'red',
  ------
}))

我知道以下内容可以解决这个问题,但对于我的用例,我需要保留第一个示例中的逻辑。所以这不适合我:

const StyledButton = styled.button(props => ({
  color: props.disabled ? 'grey' : 'red',
  backgroundColor: props.disabled ? 'grey' : transparent,
}))
被感染

也许这就是你所追求的(或类似的)

const StyledButton = styled.button((props) => {
  const disabledStyles =  {
    color: 'grey',
    'background-color': 'grey',
  };

  return {
    color: 'red',
    ...(props.disabled && disabledStyles)
  };
})

我绝对不明白为什么你不能使用上面的三元方法,但我对项目也有一些奇怪的要求。祝你好运

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用React中的条件在单独的组件中设置元素的样式

来自分类Dev

无法通过样式化组件对象在页面中呈现道具

来自分类Dev

使用React JS中的样式组件,添加条件样式的更优选方法是什么?

来自分类Dev

使用道具有条件地在样式组件中设置属性,以使用TypeScript在主题对象上建立索引?

来自分类Dev

React类组件-基于props的条件样式

来自分类Dev

hoc react组件中的样式化组件

来自分类Dev

样式组件中的CSS calc()

来自分类Dev

在 React 组件中,如何在迭代列表时有条件地显示样式

来自分类Dev

使用组件函数样式化HTML对象

来自分类Dev

对象键中的@符号

来自分类Dev

如何使用Typescript在Vue类样式组件中双向绑定v-model对象

来自分类Dev

样式化组件在样式化对象中使用功能

来自分类Dev

内联样式反应组件的可变样式对象

来自分类Dev

将样式组件主题对象转换为样式

来自分类Dev

在Coq中定义Unlambda样式的树符号

来自分类Dev

Powershell中的条件HTML样式

来自分类Dev

Javascript 中的 JasperReports 条件样式

来自分类Dev

.csproj文件中的条件条件符号定义

来自分类Dev

VSCode中的折叠样式组件常量

来自分类Dev

Nextjs中的样式组件延迟设置属性

来自分类Dev

通过样式作为React组件中的道具

来自分类Dev

样式化的组件未在Chrome中显示

来自分类Dev

如何访问反应组件中的样式元素?

来自分类Dev

如何在样式组件中显示背景?

来自分类Dev

避免在样式组件中重复代码

来自分类Dev

如何使用样式组件中的道具类型?

来自分类Dev

如何覆盖样式组件中的 css 类

来自分类Dev

嵌套样式在我的组件样式中不起作用

来自分类Dev

如何使用样式组件更改其他组件中单个组件的样式?

Related 相关文章

  1. 1

    使用React中的条件在单独的组件中设置元素的样式

  2. 2

    无法通过样式化组件对象在页面中呈现道具

  3. 3

    使用React JS中的样式组件,添加条件样式的更优选方法是什么?

  4. 4

    使用道具有条件地在样式组件中设置属性,以使用TypeScript在主题对象上建立索引?

  5. 5

    React类组件-基于props的条件样式

  6. 6

    hoc react组件中的样式化组件

  7. 7

    样式组件中的CSS calc()

  8. 8

    在 React 组件中,如何在迭代列表时有条件地显示样式

  9. 9

    使用组件函数样式化HTML对象

  10. 10

    对象键中的@符号

  11. 11

    如何使用Typescript在Vue类样式组件中双向绑定v-model对象

  12. 12

    样式化组件在样式化对象中使用功能

  13. 13

    内联样式反应组件的可变样式对象

  14. 14

    将样式组件主题对象转换为样式

  15. 15

    在Coq中定义Unlambda样式的树符号

  16. 16

    Powershell中的条件HTML样式

  17. 17

    Javascript 中的 JasperReports 条件样式

  18. 18

    .csproj文件中的条件条件符号定义

  19. 19

    VSCode中的折叠样式组件常量

  20. 20

    Nextjs中的样式组件延迟设置属性

  21. 21

    通过样式作为React组件中的道具

  22. 22

    样式化的组件未在Chrome中显示

  23. 23

    如何访问反应组件中的样式元素?

  24. 24

    如何在样式组件中显示背景?

  25. 25

    避免在样式组件中重复代码

  26. 26

    如何使用样式组件中的道具类型?

  27. 27

    如何覆盖样式组件中的 css 类

  28. 28

    嵌套样式在我的组件样式中不起作用

  29. 29

    如何使用样式组件更改其他组件中单个组件的样式?

热门标签

归档