如何根据位置在反应中更改标题背景颜色
如何根据我在 React 项目中所在的路由/页面更改标题颜色? 我查看了 withRouter，但不确定如何使用该示例. 我只想做一些事情，如果路由不是 Home 组件，然后将标题的背景颜色更改为蓝色.看起来很简单，但无法弄清楚. 解决方案 您可以使用添加到您的组件中的 location 属性，方法是通过 withRouter.从那里您根据您所在的路线路径应用条件样式. 从 'rea
..
styled-components相关内容
在样式化组件中使用来自 React Router 的“活动"状态
当您位于 NavLink 链接到的页面时，React Router 会向它们添加 active 类.如何使用样式化组件访问此属性.当您在他们的页面上时，我需要对菜单项进行不同的样式设置. const LinkElem = styled(NavLink)`字体大小:16px；字体粗细:400；${道具=>控制台日志(道具)};&:悬停{颜色:${props =>props.theme.colorO
..
将样式组件添加到项目原因.找不到命名空间“NodeJS"
构建一个默认的 react-native 应用程序，使用 Typescript 并添加样式组件，在应用程序中引用它并尝试编译导致以下错误: node_modules/styled-components/typings/styled-components.d.ts(116,44):错误 TS2503:找不到命名空间“NodeJS". 请参阅 repo 进行复制.https://githu
..
react-native 与 styled-components parent prop
我正在我的 react-native 项目中使用样式组件，我想知道如何从子元素中获取父属性 .. 这是一个示例，我有 2 个样式组件 const First = styled.View`显示:弹性；宽度:50px；高度:50px；背景颜色:${props =>props.selected ?'蓝红'};`const Second = styled.Text`//这里我想检查 First 是否有选
..
在样式组件中使用扩展运算符
是否可以将扩展运算符与 React Native 中的样式组件一起使用? 我有这个组件: const StyledHeaderText = styled.Text`fontFamily:${props =>props.theme.font};字体大小:${props =>props.theme.fontSizeSubtitle};颜色:${props =>(props.lightMode)
..
如何在样式组件之外获取主题?
我知道如何从使用 styled 方式创建的组件中获取 theme: const StyledView = styled.View`颜色:${({主题}) =>主题颜色};`; 但是如何从普通组件获取或将其应用于不同属性?示例: index.js main.js
..
警告:收到非布尔属性的“false".如何为自定义布尔属性传递布尔值?
警告:收到非布尔属性 `comingsoon` 的 `false`.如果要将其写入 DOM，请改为传递一个字符串:comingsoon="false" 或comingsoon={value.toString()}. 如何在 React 的自定义属性中传递布尔值? 我正在使用样式组件并通过组件传递属性.这是我如何传递 attr 的图片. 将布尔自定义属性作为“即将到来"传递 st
..
从生产构建中剥离的 React 样式组件
我使用样式化组件作为我的 React 应用程序的 CSS 替代品.在开发中一切正常(第一个屏幕截图)，但是当我运行生产构建(npm build)时，样式标签中的样式被删除(第二个屏幕截图).因此，生产版本中没有样式. 这是生产版本:http://projects.loratadin.com.s3-website-us-east-1.amazonaws.com/weather-app/
..
如何使用 Typescript 在不丢失任何道具的情况下键入样式组件?
我是样式组件的新手，我希望能够正确键入我的样式组件，这样当我传递道具“vs 代码"时，我可以自动检测我拥有的所有道具，而不仅仅是主题中的道具或者我可以用接口放置的那些. 我在其他一些;导出 { css, createGlobalStyle, keyframes, ThemeProvider };导出默认样式； 然后，您使用它: 从'app/styled-components'导入样式
..
如何在样式组件中动态地在内容之前渲染伪
我在样式化组件中动态呈现伪内容之前遇到了麻烦. 我做错了什么吗? 我在静态渲染内容之前没有问题，但是当我动态尝试时它不起作用. 反应组件 const Test = (props) =>{返回 ({props.children});}; 样式组件(不工作) const Text = styled.span`&:之前{内容:${props
..
样式组件的多个道具选项
我有一个使用样式化组件创建的导航栏组件.我想创建一些改变背景颜色和/或文本颜色的道具. 例如: 应具有以下 CSS: 背景:#454545；颜色:#fafafa; 而 应该是相反的: 背景:#fafafa;颜色:#454545； 但是，如果两个 prop 都没有使用，那么我想要一个默认的背景和文本颜色——比如说(为了演示目的)，像这样: 背景:#eee;颜色:#333； 现在，我
..
React.js 样式组件导入图像并将它们用作 div 背景
我正在使用样式组件并尝试设置像这样的背景图像 const HeaderImage= styled.div`背景图片:url('../../assets/image.png');'; 我也试过不加引号，就像这样 const HeaderImage= styled.div`背景图片:网址(../../assets/image.png)；'; 在这两种情况下，我得到相同的结果 http:/
..
样式组件中的动态主题
我在我的 React 应用程序中使用了样式组件，并且想要使用动态主题.有些区域会使用我的深色主题，有些会使用浅色.因为样式组件必须在使用它们的组件之外声明，我们如何动态传递主题? 解决方案 这正是 ThemeProvider 组件的用途！ 你的样式组件在插入一个函数时可以访问一个特殊的 theme 属性: const Button = styled.button`背景:${prop
..
Typescript 样式组件错误:"Type '{ children: string;}'与类型'IntrinsicAttributes'没有共同的属性."
在我的样式组件上出现打字稿错误 输入 '{ children: string;}' 没有与类型 'IntrinsicAttributes'.ts(2559) 相同的属性 从 'react' 导入 Reactimport { NotificationSuccess, NotificationError } from '../../styles'接口 IProps {错误?:布尔值；消息:字
..
目标子元素样式组件
我试图改变 ColorBox 元素的 nth-child(2) 背景颜色，将其作为 ImgGrid 的子元素> 但我似乎无法让它发挥作用，我尝试了具有不同元素的多种变体，但似乎没有任何效果 如果我不尝试定位 nth-child 元素，这将改变背景颜色 const ImgGrid = styled.div`显示:弹性；flex-wrap: 包裹;弹性方向:行；${ColorBox} {背景:
..
与样式组件一起使用的 Before 和 After 伪类
将 :before 和 :after 伪类应用于样式组件的正确方法是什么? 我知道你可以使用 &:hover {} 将 :hover 伪类应用于样式化组件. 这对之前和之后的所有伪元素都有效吗? 我已经尝试使用 &:before 和 &:after 策略和一些相当复杂的例子，我不确定我的尝试是否不起作用，因为我的例子有问题，或者它不能那样工作. 有人对此有所了解
..
在悬停时定位另一个样式组件
处理样式组件中悬停的最佳方法是什么?我有一个环绕元素，当悬停时会显示一个按钮. 我可以在组件上实现一些状态并在悬停时切换一个属性，但想知道是否有更好的方法来使用 styled-cmcomponents 来做到这一点. 类似以下的东西不起作用，但会是理想的: const Wrapper = styled.div`边界半径:0.25rem；溢出:隐藏；box-shadow: 0 3px
..
styled-components 是说在你的 React 组件(组件)周围包裹了 styled()
我在 CodeSandbox 中有我的应用程序，使用 styled-component.请参考以下网址https://lrn6vmq297.sse.codesandbox.io/ 每次我进行一些更改时，控制台都会提示. 警告:道具`className` 不匹配. 看起来你已经将 styled() 包裹在你的 React 组件(组件)周围，但是 className 道具并没有传递给
..
将样式组件与 Typescript 一起使用，prop 不存在?
这是我的样式组件. import * as React from 'react';从“样式组件"导入样式；从“应用程序类型"导入 { ComponentChildren }；界面道具{儿童:组件儿童；强调:布尔值；}const HeadingStyled = styled.h2`${道具=>props.emphasized &&css`显示:内联；填充顶部:10px；padding-right:
..
样式组件中的条件渲染
如何在样式化组件中使用条件渲染来使用 React 中的样式化组件将我的按钮类设置为活动状态? 在 css 中，我会这样做: this.setState({active: !this.state.active}) }>点击我 在样式组件中，如果我尝试使用“&&"在类名中它不喜欢它. 从 'react' 导入 React从“样式组件"导入样式const Tab = sty
..