styled-components 相关问题

为什么React不会使用样式组件渲染全局CSS

我在 YouTube 上观看了教程并按照每个步骤进行操作，但我所遵循的内容与视频中发生的情况不符。这是因为版本不同还是其他什么原因？这是代码文件 这是我的

'已定义但从未使用 no-unused-vars'，已定义但从未使用 no-unused-vars

我正在启动一个小型反应项目（初学者），当我将“App”组件切割成许多小组件（例如“header”）时，它不起作用。当我剪切标题时，错误就开始发生...

无法去除div的紫色虚线区域

学习了一些CSS和flexbox之后，我正在尝试构建一个Landing小册子网站。在构建一个的过程中，我遇到了一个我无法独自解决的问题。 我正在努力...

反应原生风格SwipeListView

我在我的React Native应用程序中使用SwipeListView，当我向左滑动时，出现两个按钮，一个用于删除，另一个用于更新，我这里遇到的问题是那些隐藏项目按钮的高度......

成帧器运动移动延迟/冻结

我是成帧器运动的新手。我使用 Framer 和 Next.js 构建了一个应用程序。但问题是它在 PC 上运行良好，但在移动设备上有时会冻结。我读了很多文档...

(Next.js) 如何更改 next/image 中 SVG 的颜色？

从“下一个/图像”导入图像 ... 我想更改 next/image 中的 SVG 颜色。 但在 CSS 中， 图像{ 菲...

stylelint 由于模板文字而无法工作

const ModalMent = styled.span` 颜色: ${({ theme }) => theme.colors.white}; ${({ 主题 }) => theme.fonts.body2}; 宽度：14.4rem； 文本对齐：居中； 下边距：0.8rem； 边距-...

如何通过添加 TabelCellProps 来扩展样式组件 MaterialUi 类型？

我想创建样式化的 TableCell 组件，但是当我在单独的文件和打字稿中使用 StyledTableCell 时出现错误 ts(2322)。 Typescrip 说我不能使用“组件”、“范围”...

当“node_modules”存在时，VScode 智能感知非常慢

VScode intelliSense 在处理某些 TypeScript、NextJs 项目时太慢。 问题似乎是node_modules文件夹，当我删除node_modules时，intelliSense似乎是

如何在具有对象语法和 TypeScript 的样式组件中使用 shouldForwardProps？

我已经尝试了所有方法，但无法弄清楚语法（这里是 TS Playground）： 常量 BASE_CONFIG = { shouldForwardProp: ( 道具：字符串， defaultValidatorFn: (prop: string) => 布尔值 ...

更改字体粗细时文本会跳转

Gotham 字体存在 CSS 问题。当我尝试将字体粗细设置为 400 或 500 时，它会导致文本向上跳跃并且不再居中。 我的字体文件有问题吗？它只发生在

为什么在我的反引号之后``我的代码是橙色的[关闭]

在此输入图像描述 我想从视频“https://www.youtube.com/watch?v=c1xTDSIXit8&t=184s&ab_channel=LamaDev”中获得类似的内容 这是代码： 从 '... 导入 React

为什么我的媒体查询无法正确应用？

无论屏幕尺寸如何，仅应用最后声明的媒体查询。在下面的示例组件中，即使屏幕宽度为 320 像素，颜色也始终为绿色。 断点： 缺点...

在 React Router Dom 6 中将 NavLink 与样式化组件一起使用正在向类添加功能

我正在尝试将样式组件与来自react-router-dom@6的NavLink一起使用。 从“样式组件”导入样式； 从“react-router-dom”导入{ NavLink as BaseNavLink }； 前...

如何通过单击按钮来管理 React mui 组件上的滚动位置？

我有一长串图像，我希望能够使用自定义按钮单击它们。我有一个父元素作为查看这些图像的窗口。我可以将父元素设置为 'scr...

React styled-components - 类型“StyledComponent<"label", any, {}, never>”不可分配给类型“never”

我正在尝试将样式组件与打字稿和 BEM 结构一起使用 所以我有一个简单的例子 索引.tsx 从“styled-components”导入样式 从 './Header' 导入标头 界面

如何将道具传递给样式化组件而不将它们转换为瞬态道具？

我创建了一个接收几个道具的文本组件。这些道具被传递到应用样式的样式组件。我不想将道具传递给 DOM，我只想访问...

如何在使用样式化组件进行样式化的反应中更改按钮组件中的 2 个跨度内容？

我想创建一个使用 html 的按钮组件，如下所示。 按钮 &l... 我想创建一个使用 html 的按钮组件，如下所示。 <button class="button_57" role="button"> <span class="text">Button</span> <span>Alternate text</span> </button> 我希望能够使用一个由 React 创建的 Button 组件。 <CustomButton {...otherProps}>{children}</CustomButton> 有没有办法用这样的道具修改 Button 组件中的 span 内容？ <Button span_content1={''} span_content2={''}></Button> 我只发现过小时候工作。 <Button> <span class='text'>Button</span> <span>Alternate text</span> </Button> 使用 React 时，我们可以创建这样的组件 function ButtonName({ content1, content2}) { return( <Button> <span class='text'>{content1}</span> <span>{content2}</span> </Button> ) } 创建组件后，我们可以这样调用组件名称。 <ButtonName content1="Button" content2="Alternate text" /> 要更改内容，我们可以将content1和content2替换为其他值 import styled from 'styled-components'; // Define your styled component const CustomButton = styled.button` // Add your styles here `; const Button = ({ span_content1, span_content2, ...props }) => ( <CustomButton {...props}> <span>{span_content1}</span> <span>{span_content2}</span> </CustomButton> ); // Use your component <Button span_content1="Button" span_content2="Alternate text" /> Button 组件接受 span_content1 和 span_content2 作为 props 并将它们用作两个 span 元素的内容。其余的道具（...道具）被转发到 CustomButton 组件。 https://react.dev/learn/passing-props-to-a-component https://styled-components.com/docs/basics#adapting-based-on-props

为什么在使用 ref 时不传递样式组件对象的值

styled-component Styled = styled.divmargin: 0; 的值未传递给 ref 元素。但是当我使用内联样式时，样式会传递给元素。 请参阅附图。 使用我...

样式化组件使用继承组件的道具接口，而不是它自己的道具接口

给定这些 React 组件： 排版.tsx： 输入 TypographyProps = HTMLAttributes & PropsWithChildren & { 编号？：字符串 } const StyledTypography = 样式化....