styled-components 相关问题

styled-components是一个用于样式化React应用程序的JavaScript库。它删除了样式和组件之间的映射，并允许您编写使用JavaScript扩充的实际CSS。

我使用上下文中的应用程序中具有主题更改功能。主题（黑暗/光）类正在应用，但颜色不会改变。我不知道这是否是我的尾风配置，因为当我尝试在标题中键入“ BG-primary”时，AutoComplete不会显示主var，否则是themecontextlogic.

themetoggler.tsx

reactjs tailwind-css themes styled-components

回答 1 投票 0

我正在尝试添加一个简单的动画，该动画的雪花在容器中从上到下掉落：这里链接：

import "./styles.css"; const seasonArray = ["winter", "summer", "autumn"]; const getSeasonValue = (season) => { switch (season) { case "winter": return winter; case "autumn": return autumn; case "summer": return summer; default: return summer; } }; const StyledButton = styled.button` border: 1px solid black; border-radius: 10px; padding: 5px; display: flex; justify-content: center; align-items: center; max-width: 33%; position: relative; min-width: 30%; height: 20%; `; const StyledButtonsWrapper = styled.div` display: flex; justify-content: space-between; height: 100vh; `; export default function App() { return ( <StyledButtonsWrapper> {seasonArray.map((season) => { return ( <StyledButton key={season} label={season}> <SnowFlakeIcon /> {season.charAt(0).toUpperCase()} {season.substring(1)} </StyledButton> ); })} </StyledButtonsWrapper> ); } const StyledSvg = styled.svg` position: absolute; top: 0; width: 100% height: 100%; animation: snowFlake 2s ease-in-out infinite; @keyframes snowFlake { 0% { transform: translateY(0); } 50% { transform:translateY(50%); } 100% { transform: translateY(100%); } } `; const SnowFlakeIcon = () => { return ( <StyledSvg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" > <path d="m10 20-1.25-2.5L6 18" fill="#88C9F9" /> <path d="M10 4 8.75 6.5 6 6" fill="#88C9F9" /> <path d="m14 20 1.25-2.5L18 18" fill="#88C9F9" /> <path d="m14 4 1.25 2.5L18 6" fill="#88C9F9" /> <path d="m17 21-3-6h-4" fill="#88C9F9" /> <path d="m17 3-3 6 1.5 3" fill="#88C9F9" /> <path d="M2 12h6.5L10 9" fill="#88C9F9" /> <path d="m20 10-1.5 2 1.5 2" fill="#88C9F9" /> <path d="M22 12h-6.5L14 15" fill="#88C9F9" /> <path d="m4 10 1.5 2L4 14" fill="#88C9F9" /> <path d="m7 21 3-6-1.5-3" fill="#88C9F9" /> <path d="m7 3 3 6h4" fill="#88C9F9" /> </StyledSvg> ); };

css reactjs css-animations styled-components

回答 1 投票 0

我在我的应用中有这种情况：

GrandChildInput

javascript reactjs styled-components

回答 2 投票 0

我应该使用什么工具在React 19中格式化样式组件？

styled-components

回答 1 投票 0

i有以下样式组件，我正在尝试添加一个Unicode字符D7作为伪元素的内容，该元素是交叉或关闭图标。但是，这似乎不起作用...

作为伪元素的内容，该元素是交叉或关闭图标的内容。 nove似乎不像CSS那样起作用。当然，我可以将SVG用于此近图标的替代方案，我很好奇是否可以使用样式组件？

javascript css reactjs styled-components

回答 2 投票 0

javascript reactjs react-router vite styled-components

回答 1 投票 0

为什么蚂蚁设计树剪辑值？

export const SiteFilter = () => { const treeData = [ { value: 'parent 1', title: 'parent 1', children: [ { value: 'parent 1-0', title: 'parent 1-0', children: [ { value: 'leaf1', title: 'leaf1', }, { value: 'leaf2', title: 'leaf2', }, { value: 'leaf3', title: 'leaf3', }, { value: 'leaf4', title: 'leaf4', }, { value: 'leaf5', title: 'leaf5', }, { value: 'leaf6', title: 'leaf6', }, ], }, { value: 'parent 1-1', title: 'parent 1-1', children: [ { value: 'leaf11', title: <b style={{ color: '#08c' }}>leaf11</b>, }, ], }, ], }, ] return ( <Space direction="vertical"> <Text> Sites (Select Limit: {siteLimit}){' '} {isError ? ( <> - <Text type="danger">Failed to fetch sites</Text> </> ) : null} </Text> <TreeSelect treeData={treeData} dropdownStyle={ { // maxHeight: '300px', // maxHeight doesnt work and minHeight extends the // height of the container but the values are still clipped. // overflowY: 'auto', // Enforce scrolling } } className={css` width: 350px; overflow: auto; //Initially set to 'scroll' which fails `} placeholder="Type or select a site..." value={query.sites as string[]} onChange={handleOnChange} allowClear showSearch multiple loading={isLoading} data-testid="sites-filter" treeCheckable showCheckedStrategy="SHOW_PARENT" treeDefaultExpandedKeys={defaultExpandedKeys} treeNodeFilterProp="title" status={isError ? 'error' : undefined} /> <Text type="secondary">Which stores should be included?</Text> </Space> ) }

css reactjs antd styled-components ant-design-pro

回答 0 投票 0

Typescript 类型定义，用于向 MUI 样式实用程序提供样式

我正在 MUI v5 中创建一堆样式组件，它们定义了一些额外的 props。 const SomeContainer = styled(Box, { 名称：“SomeContainer”，插槽：“根” ...

typescript material-ui styled-components typescript-generics

回答 2 投票 0

使用 styled-components/native 时输入错误

我正在尝试为我的应用程序配置样式组件，但在使用“样式组件/本机”时遇到类型问题。类型显示错误但有效。 tsconfig.jso...

reactjs typescript react-native styled-components

回答 1 投票 0

Tailwind 中样式组件波形符 (~) 的等价物是什么？

如何编写此样式组件的 Tailwind 等效项？ // 项目是一个div const 克隆 = styled(Item)` 〜div { 变换：无！重要； } `; 这来自codesandbox。当德拉...