styled-components 相关问题

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

我创建了这样一个组件： const StyledButton = styled.button<{ $variant: string }>` ... ` $variant props 是一个瞬态 prop（我不想将它传递给 DOM 元素（按钮）并且它可以工作......

reactjs styled-components

回答 2 投票 0

样式组件 - 将 props 传递给 GlobalStyle

我有 GlobalStyle 并进行了一些覆盖，例如： const GlobalStyle = createGlobalStyle` h6 { 字体粗细：${props => (props.semibold ? 600 : "bold")}; 字体大小：16px； } ......

reactjs styled-components

回答 2 投票 0

是否可以在使用径向渐变的卡片上创建颜色渐变背景？

我想让卡片看起来像这样预期：背景颜色是渐变的（img后面的绿色）实际：实际背景颜色不是渐变，只接受一种颜色（不是渐变）颜色...

html css styled-components card

回答 1 投票 0

TypeScript：如何将 DefaultTheme 与样式组件结合起来？

我有一个用样式组件制作并导出主题的模块我想将从模块导出的样式主题与我的应用程序主题结合起来。我在主题中尝试过以下内容...

javascript reactjs typescript styled-components tsx

回答 2 投票 0

React 中无法识别样式化组件

我有以下样式组件（未完整发布，没有任何区别）：它从“reactflow”库扩展了 Handle（和 HandleProps）接口 CustomHandleProps 扩展了 HandlePro...

reactjs typescript styled-components react-typescript react-flow

回答 3 投票 0

使用样式化组件设置 MUI 自动完成样式

我的代码中有来自 mui 的 AutoComplete 组件，并且我将其与 TextField 组件一起使用，如下所示：我的代码中有来自 mui 的 AutoComplete 组件，并且我将其与他们的 TextField 组件一起使用，如下所示： <StyledAutoComplete id="xxx" clearOnEscape options={[...]} renderInput={(params) => ( <TextField {...params} label="clearOnEscape" variant="standard" /> )} /> 其中 StyledAutoComplete 是以下样式组件： export const StyledAutocomplete = styled(Autocomplete)` .MuiAutocomplete-option { color: white; } .MuiAutocomplete-inputRoot { color: white; } .MuiAutocomplete-clearIndicator { color: white; } .MuiAutocomplete-popupIndicator { color: white; } `; 这适用于某些样式（例如输入中的文本颜色），但我不知道如何设置输入的label或选项的文本颜色（我尝试使用来自AutoComplete API 文档但这似乎不起作用）。非常感谢任何帮助。您可以按照您习惯的方式设计 .MuiAutocomplete-option 组件的不同部分。为了呈现 TextField（标签）所需的自定义，您可以传递 StyledTextField。 Autocomplete 在示例中，我们期望标签在未选择和焦点状态下为绿色。以类似的方式，您可以创建一个包含所需更改的 StyledOptionBox：const StyledTextField = styled(TextField)({ "& label, & label.Mui-focused": { color: "green" } }); 在此示例中，选项的文本颜色应为绿色。您需要通过自动完成组件的 renderOption 属性传递 const StyledOptionBox = styled(Box)({ color: "green" }); ： StyledOptionBox 在此处找到它的工作版本： https://codesandbox.io/s/reverent-stallman-tpwkw?file=/src/App.js 有关更改（以及可能的情况）的更多灵感，您可以在 MUI 文档中的 Github 的选取器示例中找到。查看我的自定义自动完成组件解决方案： <Autocomplete id="xxx" clearOnEscape options={[ { id: "test", label: "x" }, { id: "test2", label: "y" } ]} renderInput={(params) => ( <StyledTextField {...params} label="clearOnEscape" variant="standard" /> )} renderOption={(props, option) => ( <li {...props}> <StyledOptionBox>{option.label}</StyledOptionBox> </li> )} /> 还必须在我的 css 文件中覆盖这个 mui 类：interface Props<T> { id: string; label: string; options: T[]; } const CustomInput = styled(TextField)<TextFieldProps>(({ theme }) => ({ backgroundColor: theme.palette.warning.main, borderRadius: "4px", })); const CustomDropDown = ({ id, label, options }: Props<OptionType>) => { return ( <ThemeProvider theme={customTheme}> <Autocomplete disablePortal id={id} options={options} sx={{ color: "whitesmoke" }} PaperComponent={(props) => ( <Paper {...props} sx={{ backgroundColor: customTheme.palette.secondary.light, color: "whitesmoke", }} /> )} renderInput={(params) => ( <CustomInput {...params} label={label} size="small" color="info" /> )} /> </ThemeProvider> ); };

reactjs material-ui styled-components

回答 2 投票 0

向文本添加实线

我正在尝试向 React Native 中的某些文本添加粗实线。我添加了一个带有所需 CSS 的代码片段。我尝试通过 styled-components 直接应用 CSS，但收到一条错误消息

react-native styled-components

回答 3 投票 0

为什么overflow-x:clip在移动浏览器上不起作用

我想在手机上裁剪我的背景，这样用户就无法水平滚动，当我在网络浏览器上使用响应式设计模式时，它工作得很好：但是当我在手机上打开它时，它显示

html css reactjs styled-components

回答 3 投票 0

在 ReactJS 中使用样式化和类型化组件时出现错误

我有一个样式组件，如下所示：导出 const TestClassButton = styled(Button)({ ... }) 我这样使用它：我有一个如下所示的样式组件： export const TestClassButton = styled(Button)({ ... }) 我这样使用它： <Tooltip arrow title={"status"}> <TestClassButton id={"button-status-dialog"} onClick={() => setShowDialog(!showDialog)} > <ListAltIcon /> </TestClassButton> </Tooltip> 结果：如果我尝试对我的样式组件进行更多样式设置，如下所示： export const TestClassButton = styled((props) => ( <Button variant={"outlined"} {...props} /> ))({ ... }); 然后我使用它的组件是这样说的：工具提示停止工作。知道为什么会发生这种情况吗？这不是使用样式组件的正确方法吗？嘿，刚刚在 mui 页面上发布了这个信息： const TestClassButton = styled(Button, { shouldForwardProp: (props) => ['myCustomProp'].every(key => key !== prop), })<ButtonProps & { myCustomProp?: boolean }>(({ theme, myCustomProp }) => theme.unstable_sx({ background: myCustomProp ? 'red' : 'green', })) const Component = () => { return <TestClassButton myCustomProp>TEST</TestClassButton> } 为了避免额外的拼写错误和错误，我的想法是将 Material UI 属性与样式组件分开，如下所示： const StyledButton = ({ children, ...props }) => ( <Button size={"small"} variant={"contained"} {...props}> {children} </Button> ); export const TestClassButton = styled(StyledButton)({ ... });

reactjs typescript styled-components

回答 2 投票 0

React 警告：未知 Prop“扩展”触发 DOM 错误 – Vite 中的样式组件实现，具有阅读更多功能

上下文：我正在使用 React 和 styled-components 来使用 React-slick 库实现轮播中描述的“阅读更多”功能。客观的：目标是切换...

javascript css reactjs vite styled-components

回答 1 投票 0

使用 CSS-in-JS 库时，在 Tauri 中配置 CSP 的正确方法是什么？

在发布版本中，Tauri 不渲染任何内容。经过一番谷歌搜索后，我发现了同样的问题，但我仍然对使用 CSS-in-JS 库时要设置的正确 CSP 配置感到困惑......

rust styled-components tauri css-in-js

回答 1 投票 0

如何更改彼此不相关的组件的输入文本颜色？

我的组件遇到了这个问题，问题是我现在使用 3 个主要组件，一个称为 Page.jsx，另一个称为 Pencil.jsx，另一个是 PencilCase.js。这是...