styled-components 相关问题

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

Intellisense 无法与安装的样式组件扩展一起使用

直到今天我都正常使用这个扩展。自动完成功能不起作用。这是我的代码。 LoginStyle.js 从“样式组件”导入样式导出 const Container = 样式...

visual-studio-code styled-components

回答 4 投票 0

如何使用带有 Material UI 图标的样式化组件

我尝试使用覆盖“！”但这仍然不起作用，有没有办法设计它？我在网上到处查看都无济于事。从“反应”导入反应；从 'styled-

reactjs material-ui styled-components

回答 2 投票 0

“样式组件”问题：错误：无效的挂钩调用

我正在完成一个教程，他们正在使用样式化组件。渲染后在 js 文件中分配样式，我收到无效的挂钩调用。这是我的第一反应

javascript reactjs react-hooks styled-components

回答 4 投票 0

React 中使用样式组件的样式子组件不起作用

我正在深入研究 React，并且一直在尝试使用样式化组件的 Modal 组件。我试图实现与 Framer Motion 的 Motion.div 类似的效果，但使用样式组件。 ...

javascript css reactjs next.js styled-components

回答 1 投票 0

更改 MUI TextField 边框颜色

我想在材料 UI TextField 组件获得焦点时更改其边框颜色，而不使用包装整个应用程序的主题。我在我的项目中使用样式组件和 nextjs...

material-ui styled-components

回答 2 投票 0

React 测试库和样式组件 - 无法读取未定义的属性

我尝试在我的项目中使用反应测试库，但它对将主题传递给道具中的样式组件不满意，并且我收到此错误：“TypeError：无法读取属性...

reactjs styled-components react-testing-library

回答 3 投票 0

将 Expo 从 v48 升级到 v49 后，React 18 和 TypeScript 出现样式组件错误

我最近将我的 Expo 应用程序从版本 48 升级到了 49，并因此将 React 从版本 16 更新到了 18。升级后，我遇到了与样式组件相关的 TypeScript 错误

reactjs typescript react-native styled-components

回答 1 投票 0

css网格根据子内容宽度动态自动填充

是否可以使用基于子内容宽度的动态宽度的CSS网格。我认为答案是否定的，只是检查一下。正在尝试这个但没有成功。 const Grid = styled.div` 显示：...

css css-grid styled-components

回答 1 投票 0

如何在 Next.js 上的活动页面上设置链接组件的样式

我有一个关于在活动页面上设置锚组件样式的问题。这是我的代码：从“下一个/链接”导入链接；从“样式组件”导入样式； const NavStyle = styled.na...

javascript node.js reactjs next.js styled-components

回答 4 投票 0

如何在 React 中将样式组件的 themeProvider 访问到 Portal 中？

我从样式组件设置了主题提供程序，然后创建了一个门户，并且门户中的元素无法访问提供程序这是我的提供者：我从样式组件设置了主题提供程序，然后创建了一个门户，并且我的门户中的元素无法访问提供程序这是我的提供者： <ConfigProvider> <ThemeProvider theme={myTheme}> //<-- provider from styled-components <App /> </ThemeProvider> </ConfigProvider> 这就是我创建门户的方式： export const SetSelector = ()=>{ const OptionsModal = useMemo(() => { return ( <Wrapper $theme={configState.theme}> <Modal $theme={configState.theme}> // more components here, like buttons </Modal> </Wrapper> ); }, [ . . . ]); return ( <ListSelectorWrapper> {displayOptions && createPortal(OptionsModal, document.body)} </ListSelectorWrapper> ); }; } 我的模态组件无法从样式组件访问主题提供程序，我收到此错误：Uncaught TypeError: Cannot read properties of undefined (reading '300')，它来自我的按钮的属性： background: ${props=>props.$variant==="flat"?"transparent":props.$theme==="dark"?props.theme.gray[300]:props.theme.gray[600]}; 另外，我尝试将我的门户包装在提供商中，但不起作用，我遇到了同样的错误 const OptionsModal = useMemo(() => { return ( <ThemeProvider theme={myTheme}> <WrapperOverlay $theme={configState.theme}> <Modal $theme={configState.theme}> // more components here, like buttons </Modal> </WrapperOverlay> </ThemeProvider> ); }, [...]); 如何在我的门户组件中访问主题提供程序值？我使用样式组件的方式。创建主题上下文 // ./context/ThemeContext.jsx import { useState, createContext } from 'react' export const ThemeContext = createContext() export const ThemeProvider = ({ children }) => { const [theme, setTheme] = useState('light') return ( <ThemeContext.Provider value={{ theme, setTheme }}> {children} </ThemeContext.Provider> ) } 创建自定义挂钩：“useTheme”。 // ./hooks/useTheme.jsx import { useContext } from "react" import { ThemeContext } from "../context/ThemeContext" export function useTheme() { const { theme, setTheme } = useContext(ThemeContext); const toggleTheme = () => { setTheme(t => t === 'light' ? 'dark' : 'light') } return { theme, toggleTheme } } 创建主题按钮。 // ./components/ThemeButton.jsx import { useTheme } from '../hooks/useTheme'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faLightbulb, faMoon } from '@fortawesome/free-regular-svg-icons'; // create the ButtonWrapper component // retrieve data from the mode property // change color when the darkmode is active const ButtonWrapper = styled.button` color: ${(props) => props.mode === 'dark' && 'white'}; background-color: transparent; border: none; ` const ThemeButton = () => { // use custom hook const { theme, toggleTheme } = useTheme() return ( // add "mode" props to the component // that will have the value "theme" <ButtonWrapper type="button" mode={theme} onClick={() => toggleTheme()} > {theme === 'light' ? ( <FontAwesomeIcon icon={faMoon} /> ) : ( <FontAwesomeIcon icon={faLightbulb} /> )} </ButtonWrapper> ); } export default ThemeButton; 创建 StyledProvider 💬 我使用 Styled-Components 中的 ThemeProvider，就像我将样式变量与 SASS 一起使用一样。 // ./context/StyledContext.jsx import { ThemeProvider } from 'styled-components'; const styled = { colors: { black: "black", white: "white", }, } export const StyledProvider = ({ children }) => { return <ThemeProvider theme={styled}>{children}</ThemeProvider>; } 创建全局样式 // GlobalStyle.jsx import { createGlobalStyle } from "styled-components"; import { useTheme } from "./hooks/useTheme"; // {props => props.mode} to retrieve data from the mode property // {props => props.theme} to retrieve data from StyledProvider const GlobalStyleComponent = createGlobalStyle` body { background-color: ${props => props.mode === "dark" ? props.theme.colors.black : props.theme.colors.white }; transition-duration: 200ms; } `; export const GlobalStyle = () => { const { theme } = useTheme() return <GlobalStyleComponent mode={theme} /> } 使用 StyledProvider 和 ThemeProvider 包装您的应用程序。 // index.jsx import { StrictMode } from "react"; import ReactDOM from "react-dom/client"; import { StyledProvider } from './context/StyledContext'; import { ThemeProvider } from './context/ThemeContext'; import { GlobalStyle } from './GlobalStyle'; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <StrictMode> <StyledProvider> <ThemeProvider> <GlobalStyle/> <App> </ThemeProvider> </StyledProvider> </StrictMode> )

reactjs styled-components react-context react-portal

回答 1 投票 0

ReactJS导入组件Cron覆盖样式

我注意到我的ReactJS应用程序改变了样式，尤其是当我从react-cron-generator导入Cron组件后的字体：从“react-cron-generator”导入 Cron 调查...

css reactjs typescript cron styled-components

回答 1 投票 0

无法使用react-phone-input-2中的样式化组件覆盖样式

样式可以用导入的附加 CSS 文件覆盖，但不能用样式组件覆盖。为什么？从“反应”导入反应；从“styled-components/macro”导入样式；导入

reactjs styled-components

回答 2 投票 0

防止 CSS 动画在 Gatsby Hydration 上重复

在 gatsby 中，我有一个元素，它有一个初始的 css 动画。当静态网站加载时，它开始播放得很好，但在水合作用后，它会重复播放。有什么办法可以预防吗？这是我的风格...