问题标签 [styled-components]

我有一个动态大小的方形 div 网格，每个网格的高度和宽度为calc(100vmin / ${props => props.gridSize });

这并不总是平均分配，所以我的一些网格线的线之间存在间隙。

我似乎无法访问像flooror这样的 SASS/LESS 助手ceil（它们都不包含在syled-components/polish其中）。纯 javascript ( Math.floor) 似乎也不是一个选项，因为它不知道如何处理vh单位。有没有办法从这个结果中确保一个完整的像素数calc？

我很难解决这个 TypeScript 问题。

我正在使用 React + 样式组件 + TypeScript。如果我有这样的样式组件：

我的 React 组件看起来像这样：

我对 TypeScript 很陌生，但我认为我需要在组件上定义 show 道具？

我有以下样式组件，我正在尝试添加一个 unicode 字符\00d7作为伪选择器的内容，伪选择器是一个十字或关闭图标。

但是，这似乎不像在 css 中那样工作。当然，我可以为这个关闭图标使用 svg 作为替代方案，我只是好奇这是否可以通过 styled-components 实现？它似乎允许空白的伪选择器，例如''

我应该如何在 React 项目中组织样式化组件？我的意思是例如 - 我有我想要添加样式的 Navbar 组件。我应该创建单独的文件 NavbarStyle 并将其导入到 Navbar，在 Navbar 组件中创建 NavbarStyle 还是其他？还是仅适用于按钮等通用组件？

对于这个按钮和其他按钮 - 我应该创建单独的文件，例如在 styledComponents 文件夹中还是一个包含所有这些按钮的文件并导入刚需要的元素？我知道这主要取决于我们的偏好，但我想听听一些最佳实践建议（看起来 StyledComponents 文档对在项目中管理它们只字未提）。

我在我的项目中使用样式组件。现在我想实现一些简单的动画，比如animate.css

是否可以将react-animations（或类似的库）与styled-components一起使用？

再次实现像animate.css这样的动画是浪费时间。此外，我不想将其他软件包安装为Aphrodite，因为我已经有了样式组件。

我想在同一个 div 中获取图像和文本，我尝试使用 float left 并显示 inline-block 但没有用，我无法在我正在做的地方出错。

我得到的输出如下

我在 reactjs 中使用了样式化的组件。这些是我使用的样式组件

导出常量 BannerImageContainer = styled.div height:448px width:640px float: left 导出常量 BannerImage = styled.img padding:96px 96px 96px 96px margin-left:128px

出口 const BannerTextContainer = styled.div height:448px width:512px margin-right:128px float: left

导出常量 BannerHeaderText = styled.h1 width: 352px height: 64px padding-top:40px font-family: Nunito font-size: 28px font-weight: 600 line-height: 1.14 text-align: center

出口 const BannerParagraphContainer = styled.p width: 389px height: 72px opacity: 0.38 font-family: Nunito font-size: 16px line-height: 1.5 text-align: center color: #000000

出口 const SeeAllProductsButton = styled.button width: 160px height: 32px background-color: #7C6ECC color: #FFFFFF border: 0px margin: 32px 112px

这是渲染它的代码 <BannerContainer> <BannerImageContainer> <BannerImage src={bannerImage} /> </BannerImageContainer> <BannerTextContainer> <BannerHeaderText> Solving the most common problems in marketing </BannerHeaderText> <BannerParagraphContainer> Exquisite codially mr happiness of neglected distrusts. Boisterous impossible unaffected he me everything. </BannerParagraphContainer> <SeeAllProductsButton>See All Products</SeeAllProductsButton> </BannerTextContainer> </BannerContainer>

我正在学习 React 课程，并遇到了这节课，他们从中导入了一个组件，styled-components但对我来说奇怪的是第 4 行，他们使用了反引号插值而不将其括在括号中，而且它似乎不应该是反引号之间的任何空格和styled.header.

我有一个关于用酶测试的问题，所以基本上我正在做的事情看起来像：

我想用 Enzyme 做一些测试，传递不同的道具type，例如测试应该说：

should render a Primary button if type='primary'

should render a Secondary button if type='secondary'

should render a Primary button if type=''

should render a Primary button by default

我的按钮有更多的属性，但我只是color为了简单起见。

关于如何实现这一目标的任何想法？

我在 React 中遇到了一个让我感到困惑的问题。

我想创建基本上是围绕其子级的包装器的组件。假设是一个简单的 Button 组件。

这样做时，我收到以下错误：

然而，这是最疯狂的部分，当我渲染多个孩子，即孩子时，它会神奇地起作用。

=> 没有错误

世界上到底发生了什么？为什么 React 试图将我的 React 元素（它首先包装为符号）转换为字符串？符号到底是什么？如果有人能启发我，那就太棒了:) 现在我渲染一个空<span />来规避这个问题。

IE

现在这是我的<Button />组件。我知道我可以直接导出 RawButton。但我以后想做的是组合组件。目前，我只能通过渲染至少 2 个孩子来运行它。我不明白如何渲染一个孩子会导致这个问题-.-

在 React JS 的样式化组件中，我以百分比形式给出了 div 的宽度，以使其具有响应性……但是 div 在右侧得到了边距，这使得对齐受到干扰。如何摆脱这个边缘。

我得到了我需要的宽度。

丢失的数据

BannerHeaderText 是 h1 而 BannerParagraph 是 p BannerParagraphBlock 是节