使用 Styled Components 和 Polish 如何包含一个函数作为颜色?
我正在使用样式化组件并进行抛光以使颜色变暗/变亮. 这是我现在的工作: colors = ['#eee', '#ccc', '#ddd'];const calcBorderColor = ({ currentPosition }) =>{const 颜色 = 颜色 [(currentPosition) % 颜色.长度];返回颜色；};const Choice = styled.button
..
styled-components相关内容
样式组件和反应图标 成分
我是样式组件的新手，我想使用 从反应图标这是我的反应组件: 这是我的样式组件代码: import { IconContext } from 'react-icons';export const myComp= styled(IconContext.Provider)`颜色:RGB(71, 7
..
样式组件需要什么严格类型?
所以这是我的 Hoc我创建了这个，所以我可以将我的样式保存在一个单独的文件中.唯一的问题是，样式组件的 ReactElement 失败了.我不确定用什么类型替换它? import React, { ReactElement } from 'react';从“样式组件"导入样式；type TGetStyled = (props: { Component: ReactElement; pad: st
..
通过嵌套的样式组件传递道具
以这个简单的情况为例: 我有一个容器，里面嵌套了一个 h1.我想将一些道具传递给这两个元素，它们会根据浅色/深色主题改变它们的颜色；例如:白色文字/黑色背景 ||黑色文字/白色背景 问题:看起来传递给样式组件的道具(颜色和文本)并没有像我假设的那样级联. 简单例子: 导出函数 Heading(props) {返回 (//我希望 props obj 可以通过
..
使用 React-Icon 库将鼠标悬停在图标上时显示文本
所以我试图在您将鼠标悬停在鼠标上时显示文本.我正在使用 React-Icons 库并使用 Styled-Components 进行样式设置 我的导航栏上有 4 个图标 - 主页 - 关于 - 技能 - 工作 每个按钮都是它自己的组件，以使悬停正常工作，因此当我将鼠标悬停在 1 个图标上时，它不会显示所有按钮的文本 import React, { useState } from 're
..
无法在 Anchor 内设计 Grommet 图标
我刚接触带有样式组件的 Grommet.我已经检查了所有文档，但找不到解决方案. 问题 我有一个带有图标和标签的锚点.问题是当我将鼠标悬停或处于活动状态时，我无法针对样式设置图标.文本/标签虽然改变了样式.我该如何实现/解决这个问题? 我也尝试过使用样式化组件并将图标和文本放入 Grommet Box 中，但没有奏效. 请帮忙！ 从“反应"导入反应；import { An
..
React 如何使页面允许向下滚动?
我正在尝试创建聊天消息，但我不知道如何使聊天每次都向下滚动.当用户输入新消息时，我希望它始终向下滚动，以便我们可以在底部看到新消息.我觉得这是需要编辑的. const MessageContainer = styled.div`显示:弹性；弹性方向:列；溢出-y:自动；` 解决方案 您可以在聊天底部保留一个虚拟 div，然后在组件更新时滚动到它(即状态随着新消息的添加而更新): const
..
styled-components:主题中的样式覆盖组件样式
复制 预期:palevioletred 标题颜色，TitleWithoutColor 红色(主题样式触发) 得到:到处都是红色 为什么:导致这个的规则是这样的: p.column { text-align: right;} 可以被 body p.column { text-align: left; 覆盖}，让它更具体 问题:如何编写主题，让组件的样式具有更大的优先级?
..
样式化组件/反应/语义/道具和计算
您好，我有一个正常工作的菜单，我使用该属性将其大小设置为打开和关闭以及移动分辨率.但我试图对我的内容网格做同样的事情我的第二列没有得到我不知道是否与计算有关的值: 代码: {/* */}
..
将道具传递给样式组件
我正在使用来自我的 CMS (prismic.io) 的 graphql 为我的 react 站点查询数据，以生成颜色主题页面.我想将一个变量或道具传递到我的样式组件中，以根据从 CMS 发回的内容更改背景颜色. 在下面的示例中，我的 graphql 查询将返回用户输入的 HEX，然后将其应用于按钮等以主题该页面. 当用户在 CMS 中选择颜色时，颜色会随着页面的变化而变化. 任
..
使用样式组件包装时，语义 ui 中的下拉菜单不能由多选类型组成
我正在使用react语义ui Dropdown: https://react.semantic-ui.com/modules/dropdown/ 和 styled-components: https://styled-components.com/ 当我执行以下操作时(在 React render 方法中)，它运行良好: 我可以在其中选择多个项目.但现在我试图通过以
..
样式组件:父样式比子样式具有更高的优先级
图片 export const LogOutButton = styled.button`显示:内联块；....`;导出默认样式(ThemedApp)`....按钮 {....显示:弹性；....}`; 如你所见，Logout button(有 gBuhXv 类)有 display: flex，而不是 inline-block，因为 parent(ThemedApp, .jCe...) 的优先
..
Syled 组件背景图像 React
我试图通过道具传递背景图片但它不起作用，它说 url 未定义. const CardImage = styled.div`高度:自动；宽度:100%；背景大小:包含；背景: url(${props => props.data.url});`功能卡片(道具){返回 ()}
..
您似乎正在将关键帧声明 (hVshE) 插入到未标记的字符串中
大家晚上好，样式组件库有一个错误，我无法更正: 错误:您似乎正在插入关键帧声明 (hVshE)成一个未标记的字符串.这在 styled-components v3 中得到支持，但在 v4 中不再支持，因为现在注入了关键帧一经请求.请将您的字符串包裹在 css`` 帮助器中，以确保样式被正确注入.看https://www.styled-components.com/docs/api#css
..
通过样式组件中的道具映射
如这个答案所述，可以大大简化检查样式组件.例如，比较这段代码: ${props =>Object.keys(道具).filter(key => 颜色[key]).map(color => `color: ${colors[color]};`).加入(' ')} 为此: ${props =>props.white &&`颜色:${colors.white}`}${道具=>props.lig
..
制作样式组件干燥器
说到在 Styled Components 中检查 props 时，在我看来，事情可能是一个很大的 DRYer. 例如，让我们看看下面的代码: ${props =>props.white &&`颜色:${colors.white}`}${道具=>props.light &&`颜色:${colors.light}`}${道具=>props.grey &&`颜色:${colors.grey.
..
使用样式组件在 GatsbyJS 中设置自定义组件的样式
我最近开始使用 Gatsby 来构建我的网站，以前我只依赖纯 html 和 css，所以我可能在这里遗漏了一些非常基本的东西... 我正在尝试设计一个看起来像这样的自定义标题组件 从“react"导入 React从“./m-width"导入 MWidth从“../resources/images/logo.png"导入徽标函数头(){返回 (
..
样式组件:使用
我喜欢在您执行 ... 的地方使用样式化组件命名约定，但是我遇到了需要导入的问题一个组件的样式，然后还有一些共享样式的组件，但我无法再次将其导入为 S. 这是我的文件夹结构: src├── API│ ├── verb-api.js│ └── list-api.js├── axios│ └── index.js├── 组件│ └── 列表卡片│ ├── SubLis
..
如何使用样式组件为使用 array.map 创建的单个元素设置样式?
目标是能够定位每个独特的元素，以赋予其独特的样式. 在我的代码中，有问题的数组是一个对象数组，每个 dummyElement 都将具有基于当前项键值的唯一绝对位置，例如 curr.longitude. //dummyElement.styled.js 文件导出 const dummyElement = styled.a`字体大小:20px；`;//为所有 dummyElements 设置样
..
动画未动态分配给样式组件
我无法将 CSS 动画动态分配给样式化组件.我在下面复制了它. 我最初试图将 CSS 动画定义为， ...从'styled-components'导入样式，{关键帧}...导出默认函数 App() {....}const slideAnimation = 关键帧`0% {变换:translateX(0px);}100% {translateX(-400px);}`; 但是这个抛出了一
..