styled-components 相关问题

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

我有一个关于在活动页面上设置锚组件样式的问题。这是我的代码：从“下一个/链接”导入链接；从“样式组件”导入样式； 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 动画。当静态网站加载时，它开始播放得很好，但在水合作用后，它会重复播放。有什么办法可以预防吗？这是我的风格...