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

styled-components 相关问题

最新问题