在react-native上使用样式组件，如何计算组件的高度?
使用样式化的组件，我需要根据屏幕大小计算组件的高度，如下所示: const ForgotPasswordContainer = styled.View`高度:calc(100％-20px);`; 使用这种方法不起作用. 解决方案 带样式的组件不支持基于高度的百分比值.使用vh(屏幕高度百分比)或vw(屏幕宽度百分比)使其相对于屏幕尺寸. const ForgotPassword
..
styled-components相关内容
伪选择器在样式组件中是否与带有Unicode字符的CSS一样工作
我具有以下样式化的组件，并且尝试添加Unicode字符 \ 00d7 作为伪选择器的内容，该伪选择器是一个十字形或闭合图标. 但是，这似乎不像在CSS中那样起作用.当然，我可以为该关闭图标使用svg作为替代，我只是好奇是否可以通过样式组件实现?它似乎允许空白的伪选择器，例如'' const Close = styled.span`颜色:粉红色；& ;:之前{内容:'\ 00d7';
..
如何基于flex或grid建立动态网格
我想创建一个动态网格系统，其行为应如下所示:首先，当只有一项时，其宽度和高度应为100％. 将第二个子项动态添加到网格后，其高度应为100％，两个项目的宽度均应为50％. 添加了THIRD项目后，前两个项目的高度应为0f 50％，宽度为50％，第三个项目的高度应为50％，宽度为100％. 第四项的宽度应再次为50％，高度为50％.
..
从移动设备查看时，隐藏Nav.Link元素.(ReactBootstrap，TypeScript)
我已经使用reactBootstrap在我的react项目中添加了一个导航栏.从移动设备查看时，有什么方法可以隐藏其中一个navlink?我正在使用stylesComponents进行样式设置. const StyledLink = styled(Nav.Link)`font-size:12px;文本转换:大写；font-weight:粗体;颜色:$ {(props)=>(props.acti
..
Reactjs Howto模糊滚动背景图像?
我是Reactjs的新手，我想了解如何在Reactjs样式组件中重现此jquery示例:事件“滚动"时模糊背景图像 https://jsfiddle.net/BinaryMoon/8jhw2/ $(document).ready(function(){$(window).scroll(function(e){var s = $(window).scrollTop()，opacityVal =(
..
TypeError“样式化":符号不是函数
我正在运行npm测试并收到以下错误: FAIL src/App.test.js ● Test suite failed to run TypeError: symbol is not a function at String () 3 | import styled from "styled-components";
..
带有SVG导入的样式化组件的单元测试
我正在升级React项目的依赖项.我将样式组件从1.4.4升级到了2.5.0-1.我没想到会有任何重大变化，因为我读到样式化组件v2是v1的直接替代品. 我看不到Web应用程序中的任何重大更改，但是我的测试用例已损坏. 请考虑以下愚蠢且无用的测试. test('does something', () => { expect(true).toBe(true); }); 正如
..
样式化的组件:扩展样式并更改元素类型
想象一下我有以下样式: color: black; border: 1px solid white; 并且我想将它们都应用于两个不同类型的元素: const SomeImg = styled.img` margin: 2em; `; const SomeDiv = styled.div` margin: 3em; `; 如何使这两个元素扩展这些样式? 如果它们
..
Gatsby.js的GraphQL查询回调
在内容CMS中，我有两种不同的内容类型:BigCaseStudy和BigCaseStudySection.为了使这些内容出现在我的Gatsby 2.x网站中，我的想法是: 执行查询1，该查询获取我要显示的所有BigCaseStudy字段，并且还包含内容的ID字段作为元数据. 从查询1中获取ID，使其与查询2中的内容引用字段(包含ID)相匹配 执行查询2，返回所有匹配的BigCaseStu
..
样式化的组件道具的流式输入不起作用
我有这个样式的组件: type Props = { iconAlign: string, }; const IconWrapper: ComponentType = styled.View` margin: 10px 10px 0px 10px; position: absolute; ${({ iconAlign }: Props) => iconA
..
样式组件(DIV)上的onClick事件处理
我想处理DIV(在REACT JS中)的onClick事件，这实际上是一个样式组件.但这根本不起作用. 这是我构建的伪代码: props.method(props.arg)}> ... 我可以正常运行的解决方法:
..
如何修复“带有事件处理程序的静态HTML元素需要角色”？
我的reactjs样式化组件包含以下代码： this.gotoLink（）}> 这很好，但是随行人员抱怨： 带有事件处理程序的静态HTML元素需要一个角色。 如何解决此错误？ 解决方案 您需要在标签中添加角色道具
..
如何有条件地测试样式化组件和子元素？
我是单元测试的新手，我已经在文档，文章和YouTube视频上花费了20到30个小时，但是仍然无法理解如何实现这一目标。基本上我想在这里测试3件事： 确保该组件呈现3个组件 测试条件样式 测试点击事件 到目前为止，对于第一件事，如果我尝试这样做： 从“酶”导入{浅}； import从“反应”中反应； import ButtonsComponent，{SchedButto
..
使用样式化组件扩展样式无效
我正在尝试使用 styled-components 扩展React组件的样式，但无法正常工作。 AFAIK，我做的正确，但是也许我遗漏了一些东西... 这就是我所拥有的： import从“反应”中反应； 从“样式化的组件”样式化的导入； const TextContainer =（{text}）=> { return
..
试图在React中隐藏Calendar的select输入和页脚元素
我正在使用Antd中的DatePicker元素，并且试图仅显示日历正文. 我尝试使用样式化的组件直接定位日历的页眉和页脚并在两者上设置display: none;属性，但到目前为止没有骰子. 蚂蚁库 import React from "react"; import ReactDOM from "react-dom"; import "antd/dist/antd.css"; i
..
使用样式化的组件自定义antd工具提示样式
我正在尝试为antd工具提示组件设置自定义宽度:链接到文档 这怎么办? import React from "react"; import ReactDOM from "react-dom"; import "antd/dist/antd.css"; import { Tooltip } from "antd"; import styled from "styled-component
..
如何用样式化组件和TypeScript来包装Ant Design?
我想用样式化的组件包装我的ant-design组件，我知道这是可能的( https://gist.github.com/samuelcastro/0ff7db4fd54ce2b80cd1c34a85b40c08 )，但是我很难用TypeScript做到这一点. 这是我到目前为止所拥有的: import { Button as AntButton } from 'antd'; impo
..
使用样式化组件更改SVG笔触的颜色
我有一个正在使用的SVG作为标签.使用样式化组件，我试图将鼠标悬停时更改笔触颜色. 我导入了SVG: import BurgerOpenSvg from '../../images/burger_open.svg'; 我为此创建了一个样式化组件: const BurgerImageStyle = styled.img` &:hover {
..
将SVG组件作为背景图像传递给div
我正在尝试获取样式组件以采用作为反应组件的SVG并将其设置为背景图像，但出现错误: TypeError:无法将符号值转换为字符串 SVG组件代码: import React from "react"; const testSVG = props => { return (
..
无法在Chrome中编辑样式?
由于我已经实现了服务器端渲染并使用styled-components管理样式，因此我无法在Chrome开发工具中编辑样式. devtools中的样式变为斜体，并且没有复选框可以关闭/打开指定的样式. 它在Mozilla中正常运行.但是为什么不使用Chrome呢?任何想法为什么会发生?谢谢. 注意:它发生在生产中. 解决方案 我认为您可能会在生产中看到通过“快速模式"注入的样式.
..