styled-components 相关问题

styled-component 不会继承通过 React-native 中的 attrs 方法传递的 props

最近我们用最新版本的 styled-components 6.0.8 更新了针对 RN072.5 的项目 “依赖项”：{ ..., “反应”：“18.2.0”， “反应是”...

你可以使用内联样式或样式组件在react-native中进行转换吗

是否可以使用 StyleSheet 或样式组件在 React Native 中进行转换？我正在尝试以下操作，但没有运气。 从“反应”导入反应 从'styled-components/nati...导入样式

用类样式覆盖数据属性样式

我目前正在使用本机 popover API 进行无头实现，以跨浏览器提供支持。我的例子是使用 Tailwind。 我遇到了一个有趣的 popo 问题...

任何类型的 React 样式组件

背景 我正在创建一个 React UI 库。 我正在使用 TS：5.x，React：18.x，Styled-Component：5.x 版本。 问题情况 将 UI 库部署到 npm 注册表后，我做了yarn add my-

react-window 和 styled-components 如何协同工作？

我使用样式组件来进行媒体查询。但是当涉及到react-window组件时，我不知道该怎么做，因为react-window需要使用props来设置ColumnCount，ColumnWidth...... 常量

如何向我的自定义样式组件声明custom.d.ts？

我的组件代码是： 从“styled-components/native”导入样式； 导出 const GlobalButton = styled.TouchableOpacity` 边框半径：10px； 背景颜色：${ props => p...

如何在 Styled Component 中访问 Material-ui 的主题

我正在将 CRA 与 Material-ui 和 Styled Components 类型的样式一起使用。 在构建 CSS 时，我想访问 Material-ui 的默认主题。 package.json 的一部分： “依赖项”：{ “反应”：“^1...

样式化组件可以用来设置自定义组件的样式吗

我需要对一个已经做好的组件Button调整一些样式，看起来像（我简化了代码）。 按钮它实际上生成一个带有@3rd-company默认样式的 导入 { 我需要调整一些样式以适应已经制作的组件Button，看起来像（我简化了代码）。 Button它实际上生成了一个具有@3rd-company默认样式的<button> import { Button } from '@3rd-company/ui'; const desktopBtn = { width: '164px', height: '48px', marginRight: '20px', }; return ( <> <Button style={desktopBtn}> My CTA goes here </Button> </> ) 问题是这增加了内联样式。 我正在尝试将这些样式移至样式化组件中： import { Button } from '@3rd-company/ui'; import { styled } from 'styled-components'; const DesktopBtn = styled.Button` width: '164px'; height: '48px'; marign-right: '20px'; `; return ( <> <DesktopBtn> My CTA goes here </DesktopBtn> </> ) 但我收到此错误： IDE： 浏览器： 这不能用在自定义组件上吗？有什么解决办法吗？ 在此处检查扩展样式... 基本上这可能有用 import { Button } from '@3rd-company/ui'; import { styled } from 'styled-components'; const DesktopBtn = styled(Button)` width: '164px'; height: '48px'; margin-right: '20px'; `; return ( <> <DesktopBtn> My CTA goes here </DesktopBtn> </> )

根 div 填充 React（样式化组件）

我有一个简单的React App，使用Redux的Provider来包装我的App组件。 从“反应”导入反应； 从'react-dom'导入ReactDOM； 从“样式组件”导入样式； 导入 { 提供者 ...

“样式组件”的样式技术中“&&”和“&”有什么区别？

我尝试更改以下代码。我将 LabelText 样式中的“&&”更改为“&”。但我不知道，例如，为什么输出中的第一个标签是“蓝色”，当...

将 Typescript 与样式化组件和 Material UI 结合使用

将 Typescript 与 MUI+Styled-Components 结合使用，由于类型错误，您必须直接将 props 传递给 MUI 元素...... 常量索引 = () => { 返回 （ 将 Typescript 与 MUI+Styled-Components 结合使用，由于类型错误，您必须直接将 props 传递给 MUI 元素...... const Index = () => { return ( <StyledButton variant="contained" > Hello World </StyledButton> )} const StyledButton = styled(Button)` background: red; color: white; `; 但是，这会出现以下错误： 输入 '{children: string;变体：“包含”； }' 不可分配给类型 '(IntrinsicAttributes & Pick>) | PropsWithChildren，“表单” | “风格”| “标题” | ... 284 更多... | “变体”> & 部分<...>，“形式” | ... 286 更多... | “变体”> & { ...; } & { ...; }) | (IntrinsicAttributes & ... 3 个以上 ... & { ...; })’ 当您直接传入如下所示的 props 时，此错误就会消失。即使在 Styled MUI 元素上使用 0 个 props 和 0 个子元素，它也会给出错误。 const StyledButton = styled(props => <Button {...props} />)` background: red; color: white; `; 这应该适用于 MUI >= 4。* 对于早期版本，从本教程开始，尝试强制执行StyledButton的类型： const StyledButton = styled(Button)` background: red; color: white; ` as typeof Button; 我无意中通过安装 @types/styled-components / styled-components 解决了这个问题，无论如何我都需要它来让样式/主题/TS 都能很好地协同工作： import React from "react"; import styled from "styled-components"; import { Theme, useTheme } from "@material-ui/core/styles"; import Button from "@material-ui/core/Button"; const StyledCustomButton: React.FC<{ theme: Theme; }> = styled(({ ...props }) => <Button {...props}>Test</Button>)` && { padding-bottom: ${(props) => props.theme.spacing(2)}px; } `; const CustomButton: React.FC = () => { const theme: Theme = useTheme(); return <StyledCustomButton theme={theme} />; }; export default CustomButton;

RadixUI 样式无线电组

我对 Radix UI（使用 Shadcn/ui）和样式组件相当陌生。无法找出使 JSX 组件适应 Radix UI 的解决方案： 我正在使用 Radix UI Radio Groups & ...

目标第一个子级CSS样式组件

我正在使用样式组件，并且想要定位 Text 的第一个子元素，但我无法这样做。 const Text = styled.p` 字体大小：12px； ＆：第一个孩子 { 下边距：20px； ...

样式组件的“css”属性和 Storybook 的 TypeScript 问题

当我从 Storybook 导入某些内容后，我在 TypeScript 中启用 styled-component 的 css prop 时遇到问题，因为 Storybook 依赖于 @emotion/core，其类型声明定义了 Em...

为什么我会得到这个“需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。”错误？

我正在 React Native 中开发一个应用程序，并且不断收到此错误： 错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件...

带有样式组件的 NextJS 快速刷新不起作用

我有一个 NextJS 应用程序与样式组件一起使用。 我有这3个文件： 值得注意的是，为了清楚起见，删除了一些标记，因此只粘贴了相关代码。 header.js 进口 {

“主题”类型中不存在属性“navHeight”？将 MUI v5 语法与 Typescript 和自定义 props theme.ts 文件结合使用

使用 theme.palette.primary.main 有效，但是当我尝试将 MUI 与 theme.ts 文件内的接口中声明的新道具一起使用时（MUI 文档推荐），我从发布的队列中收到错误。 .

onClick 事件处理程序未应用于样式组件

在代码中，我在 Option 组件上应用了 onClick 事件处理程序，该处理程序在单击时触发 noBorder 函数，但单击时该函数不起作用，因为我在

Next.js 以线性渐变为背景的图像组件

在开发我的登陆页面（使用 next.js ）时，我决定使用这行代码作为一个部分的背景。 背景图像：线性渐变（到底部，rgb（123,8,255,0.9），rgb（123，...

maxWidth 和 maxHeight 在 React Native 中无法正常工作

我在本机反应中有以下代码： 从 'react' 导入 { useState, useEffect }; 从 'react-native' 导入 { View, Text, Image, StyleSheet, Pressable }; 从 '../colors/i... 导入 * 作为颜色