当我们使用样式组件时显示随机类?
我在 React 中使用样式化组件.每当我在样式化组件中编写样式并且在浏览器中加载应用程序时，我都会在开发人员工具的元素选项卡中获取一些随机类名称.我只想知道幕后发生了什么? const Button = styled.a`显示:内联块；边框半径:3px；填充:0.5rem 0；保证金:0.5rem 1rem；宽度:11rem；背景:透明；白颜色;边框:2px纯白色；`使成为(
..
styled-components相关内容
样式化组件渲染触发元素类型错误
我刚刚安装了 styled-components 库并开始使用它. 但是这个简单的例子: 从 'react' 导入 React从“样式组件"导入样式const Div = styled.div`背景:红色；`const AlertCard = () =>(
Hello World)导出默认警报卡 和渲染函数: render() {const { fetchingAl
..
使用样式组件更改背景图像
我想动态更改背景图像，当我尝试按照它进行操作时，它不起作用，但是当我在 chrome 中打开 devtools 时，可以显示该背景 导出 const RecommendItem = styled.div`宽度:280px；高度:50px；背景大小:
..
如何使用样式组件设置嵌套功能组件的样式
我有一个带有以下道具的按钮 - variant、loading 和 disabled.另外，我有一个按钮组，它接受按钮作为子项并将它们间隔 20px.像这样: 从技术上讲，我在这里有两个组成部分.一个 和一个 .这可以通过编写来实现: const Button = styled.button`//css 实现:禁用{不透明度:0.5；}`;const ButtonGroup = style
..
样式化组件中的样式化嵌套组件
我使用样式化组件在 React 中创建了一个下拉组件.以下是该组件的简化轮廓: const 下拉 = ({标题}{孩子们})const DropdownBase = styled.div`/* 默认样式 */`const 触发器 = 样式(链接)`/* 默认样式 */`const 子菜单 = s
..
样式化组件:悬停道具
我只想在传递道具时应用 &:hover - 在这种情况下:animated const AnimationContainer = styled.div`变换:翻译(0%)；过渡:0.3 秒缓出；&:hover {//仅在 $(props.animated) 被暂停时应用悬停位置:固定；变换:翻译(0%，-30%)；过渡:0.3 秒缓出；}`; 有没有人有建议怎么做?我想可以为每个以 .. 开头
..
如何将 React 组件的 props 传递给样式化组件
我正在尝试根据它所在的 React 组件的 props 设置样式组件的高度. 我尝试了以下方法: const Styled = styled.div`高度:${props =>props.height}`class Parent 扩展 React.Component {使成为() {返回 ()}} 但不知何故它不起作用.有人可以帮我吗
..
使用样式组件覆盖反应组件样式
我试图覆盖通过样式组件(styled.)的标准方式创建的组件样式，并且两种方式(styled() 和 style.extends)都有效为了我. 但是当我尝试使用 styled() 方法覆盖简单反应组件的样式时，它会呈现组件但不会覆盖它的样式. 下面是代码片段 import React, { Component } from "react";从“样式组件"导入样式；导出默认类 MyL
..
可以访问 React 组件状态的样式组件?
如何让样式化组件根据呈现它的 React 组件的状态呈现不同的 css 规则? 以下不起作用: class Container extends React.Component{构造函数(道具:ContainerProps){超级(道具)；this.state = {亮点:真实，暗:假};}OuterWrapper = styled.div`显示:内联块；填充:20px；${this.sta
..
HOC 中的样式组件
我想使用高阶组件向我的组件包装器添加样式.打字稿说 ComponentWithAdddedColors 有错误. type 道具 = {bg?: 字符串；};函数 withColors(组件:React.ComponentType): React.ComponentType{const ColoredComponent: React.ComponentType= 道具 =>{const { bg
..
带 TypeScript 的样式化组件 .attrs
我对如何在 TypeScript 中使用 .attrs() 函数有点困惑.假设我有以下内容: BottleBar.tsx: interface IBottleComponentProps {填充?:布尔值}const BottleComponent = styled.div.attrs(({fill}) => ({风格: {backgroundImage: `url("./media/im
..
如何使用开发工具轻松检查样式组件?
我在 React 项目中使用样式组件.当组件在浏览器中呈现时，它们会被分配一个随机生成的类名，例如: 这个类名不能帮助我识别 来自哪个组件，那么有没有办法轻松做到这一点? 附言目前我正在向我的样式组件添加属性，以便我可以在开发工具中识别它们，例如: const Foo = styled.div.attrs({'数据ID':'富'})`...`; 解决方案 这正是我们创建 Bab
..
带有样式组件的 TypeScript
这里是 TypeScript 新手.我有一个使用 styled-components 的以下组件，我想将其转换为 TypeScript. 从 'react' 导入 React从 'prop-types' 导入 PropTypes从“样式组件"导入样式const propTypes = {名称:PropTypes.string.isRequired//https://material.io/too
..
汇总错误:node_modules/react-is/index.js 未导出“isValidElementType"
我正在使用 styled-components 构建一个带有 rollUp 的包. 我的 rollup.config.js 看起来像: 从'rollup-plugin-node-resolve'导入解析从'rollup-plugin-babel'导入babel从'rollup-plugin-commonjs'导入commonjs导出默认{输入:'src/index.js',输出: {文件:
..
如何在 next.js 应用程序中使用谷歌分析?
我在 next.js 中使用了样式组件，因此我的样式需要在服务器端呈现，因此我如何将 google 分析添加到我的网站? 我检查了 next.js 谷歌分析示例 但正如我所说，由于使用了样式组件，我的 _document 文件有所不同. //_document.js从“反应"导入反应从“下一个/文档"导入文档从“样式组件"导入 { ServerStyleSheet }类 MyDocumen
..
与 Typescript 一起使用的 ThemeProvide 出现错误
我想创建一个组件 const StyledDiv = styled.div`宽度:10rem；高度:3rem；边界半径:0.2rem；背景色:${({ 主题，colorVariant，colorType }) =>主题.颜色[颜色类型].[颜色变体]}`; 但是显示错误 属性“colorVariant"在类型“Pick、“slot"上不存在|“风格"|“标题"|... 252 更多...
..
带有 TypeScript 的样式组件的“css"道具
styled-components 有一个插件可以实现以下功能: props.theme.colors.text};`}/> 有什么办法可以告诉 TypeScript css 是所有元素的有效属性吗? 解决方案 按照 这个问题: //例如src/global.d.ts从“styled-components/cssprop"导入{}//或 TS 3.8+从“styled-compone
..
使用带有 props 和 TypeScript 的样式组件
我正在尝试将 TypeScript 集成到我们的项目中，到目前为止我偶然发现了一个关于 styled-components 的问题 图书馆. 考虑这个组件 import * as React from “react";从“styled-components/native"导入样式；import { TouchableOpacity } from “react-native";//-- 类型
..
在 React 中使用全局 SASS 变量迁移到样式组件
我正在尝试将 Styled-Components 慢慢引入到我现有的代码库中，该代码库严重依赖全局 SASS 变量(导入到 main.scss 中的部分). 如何引用 SCSS 变量?以下不起作用: 从'react'导入React；从“样式组件"导入样式；const Button = styled.button`背景色:$color-blue;`;导出默认按钮； 我是否以错误的方式处理这
..
样式使 NavLink 在反应中“无法点击"
我正在尝试设置 react-router-dom NavLink 导航栏的样式.我已经采用了几种不同的方法，但在每种情况下，无论我选择哪种方式，都会使 NavLink 变得“不可点击"——它将是一个样式精美的框，单击时不会导航.以下是我采用的几种方法: 我尝试过的一种方法是使用点击测试制作迷人的 css 框.这是我想要使用的首选方法，因为它允许我设置悬停和其他伪元素的样式.我尝试了以下但没有
..