styled-components 相关问题

我在 React 项目中使用样式组件。当组件在浏览器中呈现时，它们会被分配一个随机生成的类名，例如：我在 React 项目中使用样式组件。当组件在浏览器中呈现时，它们会被分配一个随机生成的类名，例如： <div class="sc-KSdffgy oPwefl"> 这个类名不能帮助我识别<div>来自哪个组件，所以有没有办法轻松做到这一点？附言目前我正在将属性添加到我的样式组件中，以便我可以在开发工具中识别它们，例如： const Foo = styled.div.attrs({ 'data-id': 'foo' })` ... `; 这正是我们创建 Babel 插件的原因，当使用它时，您将获得包含您为组件指定的名称的类名： <div class="Sidebar__Button-KSdffgy oPwefl"> 最重要的是，我们还设置了生成组件的 displayName，这意味着在您的 React DevTools 中，您将看到实际的组件名称，而不仅仅是或。要使用 Babel 插件，请使用 npm install --save-dev babel-plugin-styled-components 安装它，然后将其添加到您的 Babel 配置中：（例如，在您的 .babelrc 中） plugins: ["styled-components"] 就是这样！调试愉快😊 请注意，如果您正在使用 create-react-app，则无法更改 Babel 配置。我使用并推荐 react-app-rewired 无需弹出即可更改配置。我们还构建了 react-app-rewire-styled-components，它会自动为您集成 styled-components Babel 插件！对于任何使用 create-react-app 的人，只需替换 import styled from "styled-components"; 到 import styled from "styled-components/macro"; 这将使您的样式组件类在其中具有其组件的名称。您只需查看类名就可以知道哪些类引用了哪些组件 ;) 对于任何使用 create-react-app 的人，另一种选择是使用 styled components babel macro npm install --save babel-plugin-macros 在你的组件内部使用 import styled from 'styled-components/macro'; 而不是 import styled from 'styled-components'; 您现在应该在您的开发工具中看到组件名称：我正在考虑做同样的事情并偶然发现以下内容作为 attrs 的替代品： const Section = styled.div` background-color: #06183d; color: white; padding: 16px; margin-top: 16px; ${breakpoint("md")` border-radius: 5px; `} ` Section.defaultProps = { "data-id": "Section" } 使用 React.Component 的defaultProps。它使对 styled.div 的调用保持清洁，并且在需要时应该更容易移除。结果：如果你使用 ts-loader 或 awesome-typescript-loader 有 typescript-plugin-styled-components. 在 Next 13 中将此添加到 next.config.js 有效： compiler: { styledComponents: true },

styled-components

回答 6 投票 0

尝试将具有不同字体属性的文本组件嵌套在另一个文本组件中。在一种情况下，行高会剪切一些文本

我有一个 React Native 应用程序，我正在尝试创建一个句子，其中不同的单词具有不同的样式，因此我创建了一个文本组件并尝试使用

javascript reactjs react-native styled-components

回答 1 投票 0

react + styled-components：伪类中断样式中的内联数据 SVG

在使用 styled-components 3.3.2 从 react-boilerplate 派生的应用程序中，我试图在伪类中显示 SVG，如下所示：从 'images/ico-arrow-down.svg' 导入 arrowDown 从 '

reactjs styled-components react-boilerplate

回答 1 投票 0

Visual Studio Code 中的 CSS 错误检查样式组件

是否有解决方案（插件、包等）在使用样式化组件时在 Visual Studio Code 中进行真正的 CSS 错误检查？下面的代码示例是一个错误（我知道），但我想...

javascript css visual-studio-code styled-components

回答 2 投票 0

我想创建一个样式组件，它继承了另一个预定义样式组件的一些属性。如何实现？

我有一个从辅助文件中导出的组件： export const BaseStyle = styled.Text` 颜色：${({ theme }) => theme.colors.gray900}; 字体大小：36px；行高：40px； `; 还有……

javascript reactjs react-native styled-components

回答 0 投票 0

Styled-Components Typescript

我收到这个错误： JSX 元素类型 'Button' 没有任何构造或调用 signatures.ts(2604) 这是我的样式组件：导出常量按钮 = styled.button...

reactjs typescript styled-components

回答 0 投票 0

Material-ui AppBar 组件不改变背景颜色

我在我的 React 应用程序中出现这个错误已经有一段时间了，但似乎找不到解决方案，也找不到合乎逻辑的解释。我正在使用 Material-UI v6 和样式组件。我有这个风格

reactjs material-ui styled-components

回答 1 投票 0

已发布的样式化组件 React 库无法访问用户应用程序 ThemeProvider

所以我正在为这家公司构建一个设计系统，组件系统在设计系统故事书中正确显示。但是当我将它导入消费者应用程序时，出现以下错误

reactjs npm next.js styled-components npm-publish

回答 3 投票 0

Styled-Components，如何动态生成css属性？

给定两个动态属性：当前颜色卡片剩余 const colors = ['blue', 'red', 'green', 'yellow', 'orange'] 使用 Styled 组件，如何动态设置 box-shadow 属性？

css reactjs styled-components

回答 2 投票 0

CSS 宽度 100% 不适用于相关元素

我试图让一个 div 元素填充其父容器的高度，但是 h-full 类不起作用。我也试过 min-h 但它也不起作用这是相关代码：我试图让一个 div 元素填充其父容器的高度，但 h-full 类不起作用。我也试过 min-h 但它也不起作用这是相关代码： <div className='flex justify-center items-center'> <div className='w-[700px] h-full border-none rounded-md relative' style={{ padding: `${framePadding}px`, background: `${frameBg.startsWith('#') ? frameBg : '#' + frameBg}`, }} > <textarea ref={inputRef} placeholder='Enter HTML Source Code' id='editing' spellCheck='false' onInput={() => { onCodeChange(inputRef.current.value) sync_scroll(inputRef.current) }} onScroll={() => sync_scroll(inputRef.current)} onKeyDown={(event) => check_tab(inputRef.current, event)} ></textarea> <pre id='highlighting' aria-hidden='true'> <code className='language-html' id='highlighting-content'></code> </pre> </div> </div> 相关CSS代码： #highlighting { margin: 10px; padding: 10px; border: 0; width: -webkit-fill-available; max-width: 700px; height: 150px; } #editing, #highlighting { /* In the same place */ position: absolute; top: 0; left: 0; } /* Move the textarea in front of the result */ #editing { z-index: 1; } #highlighting { z-index: 0; } #editing { color: transparent; background: transparent; caret-color: white; /* Or choose your favourite color */ } /* Can be scrolled */ #editing, #highlighting { overflow: auto; white-space: nowrap; /* Allows textarea to scroll horizontally */ } 我得到的：我想要的：

css reactjs tailwind-css styled-components

回答 0 投票 0

如何将道具传递给在 MUI 中“设置样式”的组件？

学习 MUI 并很好地遵循文档。但是，我正在尝试按照示例中的方式设置 Paper 组件的样式，但我希望 Paper 组件具有 elevation={3}。我如何将该道具传递给

reactjs material-ui styled-components mui5

回答 2 投票 0

使导航栏固定扩展它的宽度

我用 React 为 Web 应用程序创建了一个导航栏。首先，我设计了一个卡片元素来定义站点内容，并在这张卡片中添加了一个自定义导航栏，但是当我设置导航栏的位置时...

css reactjs styled-components

回答 2 投票 0

ReactJS 样式组件在渲染时导致空错误

我正在一个简单的 React/Express 网站上工作，我正在尝试使用 styled-components 库实现 CSS-in-JS。我的应用程序使用普通 .css 文件渲染一切正常，但是当我尝试

css reactjs react-hooks styled-components

回答 0 投票 0

让一个 div 填充一个可变高度的 div 剩下的剩余空间

我想包装每个元素而不留下前一个 div 留下的任何空间。每个 div 都有一个可变的高度，我希望元素堆叠在一起。我想包装每个元素而不留下前一个div留下的任何空间。每个 div 都有一个可变的高度，我希望元素堆叠在彼此之上。 <div className="Notes-Grid" id='Notes-Grid'> <Note data={ "Create a new Post"} /> <Note data={ "Oh acceptance apartments up sympathize astonished delightful. Waiting him new lasting towards. Continuing melancholy especially so to. Me unpleasing impossible in attachment announcing so astonished. What ask leaf may nor upon door. Tended remain my do stairs. Oh smiling amiable am so visited cordial in offices hearted."} /> <Note data={ "Test"} /> <Note data={ "Testing 1233"} /> <Note data={ "Test"} /> <Note data={ "Oh acceptance apartments up sympathize astonished delightful. Waiting him new lasting towards. Continuing melancholy especially so to. Me unpleasing impossible in attachment announcing so astonished. What ask leaf may nor upon door. Tended remain my do stairs. Oh smiling amiable am so visited cordial in offices hearted."} /> </div> .Notes-Grid { display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; } .Note { background-color: var(--dark_gray); flex: 0 0 300px; height: fit-content; border: 4px solid red; } 输出：我想重现的是：如果这不能用flexbox完成，我愿意接受其他选择。使用砌体 (https://masonry.desandro.com/) 进行此布局。如果需要通过 css 只使用列来完成。 .notes-grid { column-count:3; column-gap: 15px; } .note { display: inline-block; background-color: grey; margin-bottom: 15px; border: 4px solid red; } 基本上有两种方法可以解决这个问题： .Notes-Grid 框的非直底边：将每个 div 紧接在另一个列中，让它们只占用所需的空间 .Notes-Grid 框的直底边：使所有三列的高度相同，并让里面的 div 增长 - 这将导致一些 div 占用比他们需要的更多的空间真的没有别的办法：要么有直线，但细胞在生长，要么有非直线，细胞的原始大小保持不变。实施对于这两个选项，每列都需要.Note-Column div（在本例中为 3）。它们需要是彼此的兄弟姐妹，并包含给定的网格单元 div，我们将给它一个类名.Note-Cell。然后，设.Notes-Grid为display: flex和flex-direction: row。 .Note-Column现在需要flex: 1 1 0，以便它们相应地增长和收缩。有了这个，你就会有等宽的列，列中的单元格应该一个接一个地放置。选项#1 现在应该实施。对于选项 #2，您只需在 display: flex 上设置 .Note-Column，并给出 .Note-Cell 的 flex: 1 1 0。还在 justify-content: space-between 上包含一个 .Note-Column，以便将第一个和最后一个单元格放在 .Note-Grid 的边界上，这将实现提到的直底边。 Voilá，现在你的 Note-Grid 应该像你期望的那样工作了。弹性盒子如果您对使用的 flex 命令感到困惑，请查看本指南。我认为 flexboxes 在那里解释得很好。

css reactjs flexbox jsx styled-components

回答 2 投票 0

VScode 和样式化组件没有 CSS 自动完成

我正在 jsx 文件中使用样式组件，突然自动完成（emmet？）消失了。我有 VScode 样式组件扩展，无法弄清楚发生了什么。它只会自动

css reactjs jsx styled-components intellisense

回答 0 投票 0

styled-components 相关问题

最新问题