样式化组件:如何针对直系儿童?

2024-05-16

我在文档中看到 & 选择器用于嵌套定位。但以下不起作用。这里使用的正确语法是什么?

const InlineContainer = styled.div`
  display: flex;

  & > * {
    margin-right: "40px";
  }
`;

作为 CSS 值,字符串"40px"该值无效40px does.

const FlexBox = styled.div`
  margin: 20px;
  padding: 20px;
  border: 1px solid palevioletred;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  > * {
    background-color: yellow;
    padding: 20px;
  }

  > div {
    border: 2px solid black;
  }
`;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

样式化组件:如何针对直系儿童? 的相关文章

  • React 不适用于 Android 4.4.2 Web 视图浏览器

    React 在我的 Android 手机上不起作用 我不认为这是我的代码错误 因为即使我写的唯一内容是 p hello world p 它仍然没有显示 在 chrome 远程吊顶上查看后 这显示了 Map is not defined 以前
  • 地图内的三元运算符

    我正在开发一个网络应用程序 用户可以在其中查看项目列表 并可以将某些项目标记为收藏夹 收藏夹以带有 prop this props favourites 的 ID 数组的形式提供 为了防止重复条目 如果 item id 已经在 this p
  • React 和 Leaflet 结合的好方法

    我正在开发一个将 React 和 Leaflet 结合起来的项目 但我必须说我在语义方面遇到了一些困难 由于大部分内容都是由 Leaflet 直接管理的 我不知道将 Leaflet 映射实例添加为 React 组件中的状态是否有意义 当涉及
  • Jest 使用 window.require 测试 Electron/React 组件

    我目前正在创建一个使用 React 来创建界面的 Electron 应用程序 为了访问 fs 我一直在使用 const fs window require fs 在电子窗口中效果很好 问题是 当我为使用 window require fs
  • React Router 1.0 使用 router.transitionTo() 而不使用导航 mixin

    有没有更简单的方法来访问Router组件中的对象执行诸如调用之类的操作transitionTo 不使用导航混合 这是一个 ES6 组件 目前 在像按钮单击这样的事件上 我一直在写这样的内容 class Button extends Reac
  • React Hooks 背后的 JavaScript 机制是如何工作的?

    我的问题涉及使 React hooks 成为可能的 Javascript 机制 React 最近的发展允许我们创建钩子 即 对于 React 状态 使用简单的函数 例如 function App const someVar setSomeV
  • React Router Navigate 路径

    我想更好地了解 useNavigate 的工作原理 因为我并不真正理解该模式 这是我的路线
  • 如何给antd Select设置自定义样式?

    我要定制antdSelect 当用户点击Select蚂蚁金服Option应该显示在 antd 上Select而不是显示在Select antd Select https ant design components select https
  • 使用 React Router v6 保护路由 [重复]

    这个问题在这里已经有答案了 使用新版本 6 的 React router 编写 ProtectedRoute 的正确方法是什么 我写了这个 但这不是一条路线 const PrivateRoute component Component pr
  • 为什么 React 会删除我的类名?

    我正在学习 Reactjs 并且正在使用一些组件渲染一个简单的页面 该组件之一是 class Header extends React Component render return
  • 如何在 CRA (create-react-app) 和 craco 中通过 webpack 设置别名路径?

    我在片场遇到问题webpack别名路径使用创建反应应用程序 and craco https www npmjs com package craco craco 已经谷歌搜索但无法解决问题 我收到一个错误Module not found Ca
  • 无法读取未定义的属性“mockResolvedValue”

    我在模拟 api 调用时遇到错误 TypeError Cannot read property mockResolvedValue of undefined 并且不明白为什么 我正在利用 jest 来测试我的 api 获取调用函数 这是我要
  • 检索设备信息 React-Native iOS

    嘿 我正在尝试从 iPad 获取设备信息 我尝试过使用https github com rebeccahughes react native device info https github com rebeccahughes react
  • React jest 和 MSAL 收到 BrowserAuthError

    我正在尝试测试一些使用 MSAL 进行身份验证的组件 到目前为止 我有一个简单的测试 测试我的组件是否可以渲染 如下所示 let container beforeEach gt container render
  • 如何在同一端口上设置 React 应用程序和 API?

    我有一个 React 应用程序 它通过 API 从单独的数据库中提取数据 当我在本地运行它时 应用程序是一个端口 API 在另一个端口上 因为当我在应用程序中对 API 进行 AJAX 调用时 我需要包含 API 可以连接的 URL 如果我
  • Nginx:在同一服务器上为多个 React 应用程序提供服务

    我正在尝试在同一服务器上设置多个 React 应用程序 问题是在我构建项目之后 index html from build 已找到 但辅助文件来自build static不是 最初 我只用一个应用程序location static 有别名
  • 在 React 组件中动态创建元素

    我创建了一个辅助函数 当我单击按钮时 它可以在组件中动态创建元素 但是它没有显示我尝试附加到父 div 的 html 的一半 它正确地将标签添加为 html 但其余部分只是纯文本 谁能明白为什么吗 用于动态创建内容的函数 function
  • 为什么 Leaflet 在 React 中平移和缩放速度这么慢?

    我有一个相当简单的应用程序 使用 leaflet js 渲染大约 3000 个点 它渲染得相当快 但平移和缩放非常慢 看看chrome中的性能工具 看起来大部分时间都花在了重新计算样式上 但这并没有什么帮助
  • 如何将 props 传递给模态

    我有一个购物应用程序 我可以在其中映射一些产品并将它们呈现在屏幕上 用户可以增加 减少数量 当数量达到 1 并且用户点击减少时 一些中间件会介入并询问他们是否确定要将其从购物篮中删除 如果他们单击 否 则会关闭模式并将其留在购物篮中 如果他
  • 如何覆盖 CSS 模块文件中的全局 CSS?

    让我们说在我的global css我有一个 Next js 项目的文件 flex display flex justify content center align items center height 100 我也有一个Layout j

随机推荐

  • 如何使用 python 在 Windows 中禁用/启用特定 USB 端口? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想在图形窗口中创建一个切换开关 可以使用 python 禁用 启用 Windows 中的特定 USB 端口 我可以使用哪个外部命令或
  • 在 SQL Server 中将 UTC 毫秒转换为 DATETIME

    我想在 SQL Server 中将 UTC 毫秒转换为 DateTime 这可以通过以下代码在 C 中轻松完成 DateTime startDate new DateTime 1970 1 1 AddMilliseconds 1348203
  • React 中的变异状态有哪些缺点?

    我有一个带有顶级组件和许多嵌套子组件的 React 应用程序 顶级组件是唯一具有状态的组件 该状态采用单个变量的形式 this state g new BlackJackGame g 包含一个复杂的数据结构 class BlackJackG
  • 使用 jQuery 查找带有文本的元素

    我想创建一个包含文本字符串的 div 中所有 html 元素的数组 例如 p some string p 我不想获取字符串 我希望数组项成为元素 在示例中 将是 p 节点 我事先不知道字符串是什么 所以我无法查找匹配的字符串值 我也不希望空
  • Android Accessibility 执行触摸操作

    我想知道是否可以使用 Android 辅助功能服务在屏幕上的位置执行触摸操作 例如 Bundle arguments new Bundle arguments putInt coord X X value arguments putInt
  • 有没有办法让 git flow 显示它在幕后执行的命令?

    有什么方法可以让 git flow 提前告诉我当我执行 flow 命令时它将执行的确切 git 命令吗 或者告诉我它是东吗 我只能看到输出和摘要吗 你可以使用Git的GIT TRACE 环境变量 http git scm com docs
  • requestValidationMode 2.0 和 4.0 有什么区别

    这是 MSDN 的定义 4 0 默认值 HttpRequest 对象在内部设置一个标志 指示每当访问任何 HTTP 请求数据时都应触发请求验证 这保证了在请求期间访问 cookie 和 URL 等数据之前触发请求验证 配置文件中的页面元素
  • 将 mydomain.com 重定向到不带 www 的 openshift 应用程序

    我正在尝试在 Openshift 上部署我的应用程序 我已经添加www mydomain com and mydomain com作为 Openshift 上的别名 并将 cname 记录 www 更改为myapp mydomain rhc
  • Flutter - 构建失败并出现异常

    当我启动我的应用程序时 我收到此错误消息 自上次运行以来我没有进行任何更改 当时一切都很好 有人知道如何解决这个问题吗 谢谢 FAILURE Build failed with an exception 什么地方出了错 无法确定任务 app
  • 在构造函数中调用可重写的方法,例如 Swing 的 add()

    我知道从构造函数调用可重写的方法是一个坏主意 但我也看到到处都是用 Swing 完成的 其中代码如下add new JLabel Something 一直出现在构造函数中 以 NetBeans IDE 为例 它对构造函数中的可重写调用非常挑
  • 导出BQ表时是否可以指定CSV引号字符?

    我使用以下命令导出表bq extract destination format CSV compression GZIP noprint header table table
  • 如何更改对话框的默认黑色暗淡背景“颜色”(而不是暗淡量)?

    这是随机显示的图像Dialog在网上找到的 我一直在实施一个自定义Dialog 我可以处理对话框上的几乎所有内容 除了对话框本身下方的默认黑色昏暗背景之外 但在其后面的整个屏幕上 基本上我想改变它color和阿尔法值 我一直在 StackO
  • gets() 如何超过 malloc() 分配的内存?

    我对 malloc 和 realloc 函数有疑问 当我使用 malloc 函数时 为字符指针分配10个字节的内存 但是当我分配值时 对于该字符指针 如果我尝试分配 则需要超过 10 个字节 怎么可能 例如 main char ptr pt
  • 为什么在 C# 中使用 String.Concat()?

    我想知道这个问题有一段时间了 为什么使用String Concat 而不是使用 操作员 我明白了String Format因为它是一个空洞使用 运算符并使您的代码看起来更好 例如 string one bob string two jim
  • Webpack 4 with Less 和 MiniCssExtractPlugin 使用条目

    我的应用程序中的样式结构如下 应用 css bootstrap boostrap less gt has import another less another less common common less entries bootstr
  • Mongodb $push 嵌套数组

    我想向我的嵌套数组添加新数据 我的文档是 username erkin email email protected cdn cgi l email protection password b playlists id 58 name asd
  • 查找列表中项目的索引

    给定一个列表 foo bar baz 和列表中的一个项目 bar 如何获取它的索引1 gt gt gt foo bar baz index bar 1 See 文档 https docs python org tutorial datast
  • WPF 中处理系统关闭

    如何在 WPF 中重写 WndProc 当我的窗口关闭时 我尝试检查我正在使用的文件是否被修改 如果是 我必须提示用户 你想保存更改吗 消息 然后关闭正在使用的文件和窗口 但是 当我的窗口仍然打开时 我无法处理用户重新启动 关闭 注销的情况
  • 如何使用 Swift 将“完成”按钮添加到 iOS 中的数字键盘?

    它在默认键盘上工作得很好 但我无法让它在数字键盘上工作 有任何想法吗 据我所知 你不能在键盘部分添加 完成 按钮 你应该添加一个inputAccessoryView to the UITextField or UITextView 如果这就
  • 样式化组件:如何针对直系儿童?

    我在文档中看到 选择器用于嵌套定位 但以下不起作用 这里使用的正确语法是什么 const InlineContainer styled div display flex gt margin right 40px 作为 CSS 值 字符串 4