styled-components 相关问题

styled-components是一个用于样式化React应用程序的JavaScript库。它删除了样式和组件之间的映射,并允许您编写使用JavaScript扩充的实际CSS。

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

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

回答 1 投票 0

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

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

回答 2 投票 0

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

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

回答 0 投票 0

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

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

回答 3 投票 0

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

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

回答 2 投票 0

如何在使用样式化组件进行样式化的反应中更改按钮组件中的 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

回答 2 投票 0

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

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

回答 0 投票 0

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

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

回答 0 投票 0

使用 styled-components 设置样式时使用 mapbox 的 mapbox-gl 渲染地图的问题

我在使用样式组件时尝试渲染地图,但它不渲染地图。 使用样式化组件时,我的 console.log 显示地图为空。但是当我尝试使用内联样式时......

回答 0 投票 0

StudyOptionsComponent 在网络上显示但不在 iOS/移动设备上显示 - React Native

我有一个名为 StudyOptionsComponent 的组件,它非常基本,但由于某种原因,它不会在 iOS 上显示,但会在 Web 上显示。平台之间唯一变化的是尺寸和

回答 1 投票 0

如何在带有 SSR 的 NextJs13 中使用 Styled-components?

错误信息: 服务器错误 TypeError: createContext 仅适用于客户端组件。在文件顶部添加“使用客户端”指令以使用它。阅读更多:https://nextjs.org/docs/

回答 1 投票 0

React Router Dom V6 不加载样式组件样式

在 React 项目中,我使用 React Router Dom v6 创建路由。有些路线是公共的,有些是私人的。对于这个逻辑我做了: function Private ({ signed }: Control): JSX.Ele...

回答 0 投票 0

在 React Native 中同时使用样式组件 ThemeProvider 和 React-Navigation

我正在尝试使用样式组件为我的 React Native 应用程序创建主题。但是,当我尝试从样式化组件中的主题访问值时,我收到一条错误消息 “财产'pri ...

回答 0 投票 0

React-Native 中的自定义形状图像 [关闭]

我正在尝试重塑背景图像,如下例所示 我想想 : 使用蒙版视图 变换属性 边界半径 有没有办法用 React-Native 以适当的方式做到这一点? T...

回答 0 投票 0

我的工具提示位置有问题,总是在同一个地方显示位置

这是代码,是一个简单的工具提示,但我冻结在这里!!帮助 const StyledTooltip = styled.div` 位置:绝对; 可见性:隐藏; 背景:#666565; ` 常量元素 = styled.div` 背景...

回答 0 投票 0

如何为 React Native 应用程序创建响应式 UI 设计

如何考虑设备尺寸、屏幕方向和像素密度等因素,为 React Native 应用程序创建响应式 UI 设计?

回答 0 投票 0

“styled-components”的样式技术中“&&”和“&”有什么不同?

我尝试更改以下代码。我在 LabelText 样式中将 '&&' 更改为 '&'。但我不知道,例如,为什么当 ...

回答 1 投票 0

我想在 Next.13 中通过服务器端呈现样式组件。我怎么办?

在特定时间样式化之前渲染组件 我想在服务器端渲染样式组件

回答 0 投票 0

React 样式组件中的 css 容器查询问题

有没有人有任何使用 styled-components 包进行 css 容器查询的示例?我什至无法让查询中的 css 显示出来。 我尝试了一些东西。下面是...

回答 0 投票 0

收集页面数据.TypeError: styled.div is not a function

我正在使用Vite构建一个包,但是当我在Next.js中使用这个包时,我得到了这个错误: 收集页面数据 .TypeError: styled.div is not a function 在文件中:dist/org-chart-maker.mjs:3:29 在

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.