- 综合排序
- 最热优先
- 最新优先
- 来自专栏web share
react和vue设主题色
defineComponent, PropType, provide } from "vue" const THEME_PROVIDER_KEY = Symbol() interface Theme { } const ThemeProvider defineComponent({ name: 'ThemeProvider', props: { theme: { type: Object return (context.value.widgets as any)[name] }) return widgetRef } export default ThemeProvider 使用: <ThemeProvider theme={themeDefault as any}> <Form /> </ThemeProvider>
61010发布于 2021-09-15 - 来自专栏Next.js 实战系列
Next.js 实战 (三)：优雅的实现暗黑主题模式
具体步骤 1、 安装 next-themes 依赖： pnpm add next-themes 2、 新增 /components/ThemeProvider/index.tsx 文件： 'use client '; import { ThemeProvider as NextThemesProvider } from 'next-themes'; import * as React from 'react' ; export default function ThemeProvider({ children, ...props }: React.ComponentProps<typeof NextThemesProvider return <NextThemesProvider {...props}>{children}</NextThemesProvider>; } 3、 /app/layout.tsx 文件中注入 ThemeProvider : import { ThemeProvider } from "@/components/theme-provider" export default function RootLayout({
59200编辑于 2025-08-15 企业级 React 项目的高级测试设置
其中一个例子是material-ui或styled-components的ThemeProvider。 <ThemeProvider theme={theme}> <CustomCheckbox defaultChecked /></ThemeProvider>现在，如果要测试组件功能，该功能使用提供者传递的值 我们可以使用相同的概念来缓解此问题，并用ThemeProvider包装根组件。为了缓解这个问题，让我们调整renderConnected函数，将组件包装在ThemeProvider中。 ;import { initialState as reducerInitialState, reducer, store } from 'reducer';// ---- 注意这里import { ThemeProvider </Provider> </ThemeProvider> ); return render(ui, { wrapper: Wrapper, ...renderOptions });};export
1.2K00编辑于 2024-02-02- 来自专栏前端开发
提供一些使用Context+useContext进行跨层级组件通信的具体示例
提供主题数据的顶层组件（Provider）export function ThemeProvider({ children }) { const [theme, setTheme] = useState context) { throw new Error('useTheme must be used within a ThemeProvider'); } return context;}// }function ChildComponent() { return <ThemedButton />; // 深层组件直接使用}关键点： 通过 ThemeProvider 包裹整个应用，所有后代组件可获取主题数据 // 组合示例：同时使用ThemeContext和UserContextfunction App() { // 多层Provider嵌套，分别提供不同数据 return ( <ThemeProvider > <UserProvider> <Layout /> </UserProvider> </ThemeProvider> );}function Layout(
35210编辑于 2025-08-26 - 来自专栏大数据
Context API 实战应用
useState } from 'react'; // 创建 Context const ThemeContext = createContext(); // Provider 组件 function ThemeProvider {toggleTheme}> 切换主题: {theme} </button> ); } // App 组件 function App() { return ( <ThemeProvider >
<ThemeButton /> <ThemeButtonWithHook /></ThemeProvider function ThemeProvider({ children }) { const [theme, setTheme] = useState('light'); const toggleTheme ><ThemeButton /> <ThemeButtonWithHook /></ThemeProvider41610编辑于 2024-10-30 - 来自专栏andyhu-大前端
styled-components 深入浅出 (二) : 高阶组件
所有相关文章： 《styled-components 深入浅出 (一) : 基础使用》 《styled-components 深入浅出 (二) : 高阶组件》 高阶用法 使用 ThemeProvider 定义主题 通过 ThemeProvider 可以将定义的主题样式注入到组件树中其下方任意位置的所有样式组件中，或者可以说是：将定义的样式作用在被 ThemeProvider 包裹的所有子组件上。 const Box = styled.div` color: ${props => props.theme.color}; ` import {ThemeProvider} from "styled-components <ThemeProvider theme={{ color: 'green' }}> <Box>ThemeProvider</Box> </ThemeProvider> 从 ThemeProvider <ThemeProvider> 中定义的主题样式 <ThemeProvider theme={{ fontFamily: 'Helvetica Neue' }}> <React.Fragment
90430编辑于 2023-09-01 - ; } provider 作用： value 属性传递 context，供给 Consumer 使用 value 属性改变，ThemeProvider 会让消费 Provider value 的组件重新渲染 # 消费者 新版本想要获取 context 的消费者 value={contextValue}> <Child /> </ThemeProvider> <button onClick={() => setContextValue value={ contextValue } > { React.useMemo(()=> <Son /> ,[]) } </ThemeProvider> 其他 api displayName来自专栏Cellinlab's Blog
React 进阶 - context
# createContext const ThemeContext = React.createContext(null); const ThemeProvider = ThemeContext.Provider value={contextValue}> <ConsumerDemo /> </ThemeProvider>
81910编辑于 2023-05-17
使用 TypeScript 优化 React Context：综合指南
touch src/App.tsx 接下来，我们将从ThemeProvider中导入组件ThemeContext.tsx并将其包装在App组件周围。 // src/App.tsx import { ThemeProvider } from '. /ThemeContext'; function App() { return ( <ThemeProvider>
在主题切换示例中添加样式切换的动画效果
主题Provider组件export function ThemeProvider({ children }) { const [theme, setTheme] = useState('light' context) { throw new Error('useTheme must be used within a ThemeProvider'); } return context;}// 根组件function App() { return ( <ThemeProvider>
基于 styled-components 实现一套皮肤系统
import React from "react"; import { render } from "react-dom"; import { ThemeProvider } from "styled-components /skin.js"; const Instance = function () { return ( <ThemeProvider theme={theme002}> <Skin > <Survey title="小调查2" options={["好", "一般", "不好"]} /> </Skin> </ThemeProvider> )
炸裂！号称为 AIGC 应用而生的UI库长这样~
import { ThemeProvider, Button } from '@lobehub/ui' import { Button } from 'antd' export default () => ( <ThemeProvider> <Button>Hello AIGC</Button> </ThemeProvider> ) 好啦~怎么说它是用来构建AIGC的呢？
React Hooks实战：从useState到useContext深度解析
useState, useContext } from 'react';// 创建ThemeContextconst ThemeContext = createContext('light');function ThemeProvider (count + 1)}> Click me ({theme}) </button>
Next.js 实战 (五)：添加路由 Transition 过渡效果和 Loading 动画
{ return ( <html suppressHydrationWarning> <body> <NextUIProvider> <ThemeProvider {/* 全局 Loading */} <FullLoading /> {children} </ThemeProvider { return ( <html suppressHydrationWarning> <body> <NextUIProvider> <ThemeProvider PageAnimatePresence> {children} </PageAnimatePresence> </ThemeProvider
如何在React.js中使用Shadcn/UI
body: 'Arial, sans-serif', heading: 'Georgia, serif', },};export default theme;b) 将主题应用到组件使用ThemeProvider 更新src/App.js文件如下：import React from 'react';import { Button, ThemeProvider } from 'shadcn-ui';import theme /theme';function App() { return ( <ThemeProvider theme={theme}>
为什么Prop Drilling会摧毁你的React代码架构？
/contexts/UserContext'; import { ThemeProvider } from '. /contexts/NotificationContext'; function App() { return ( <UserProvider> <ThemeProvider> <NotificationProvider> <Layout /> </NotificationProvider> </ThemeProvider 常见陷阱和优化策略 陷阱1：Provider Hell // ❌ 嵌套太多层 <UserProvider> <ThemeProvider> <NotificationProvider> > <NotificationProvider> {children} </NotificationProvider> </ThemeProvider>
React-组件-CSS-In-JS重要特性
</StyleDiv> ) }}export default Home;设置主题主题的含义就是设置全局的样式，通过 styled 如何来进行设置，在styled 当中提供了一个 ThemeProvider /component/About'import {ThemeProvider} from "styled-components";class App extends React.Component { render() { return ( <ThemeProvider theme={{size: '50px', color: 'red'}}> <Home/> <About/> </ThemeProvider> ); }}export default App;Home.js
《模块化系列》snowpack，提高10倍打包速度。
import React, { useState } from "react"; import ReactDOM from "react-dom"; import styled, { ThemeProvider : React.ReactNode }) => { return ( <> <ThemeProvider theme={ThemeColor}>{children}</ThemeProvider
45. 精读《React's new Context API》
新版 Context 语法是这样的： const ThemeContext = React.createContext('light') class ThemeProvider extends React.Component children}) => ThemeContext.consume(children) class App extends React.Component { render() { <ThemeProvider > <ThemeConsumer>{val =>
5件你可能不知道可以使用 CSS-in-JS 来做的事情
通过这种方式，你可以保留 Aphrodite(或 styled-components) 的优点，并使用 JSS 的所有特性和 插件，从 规则缓存 到 规则隔离，以及主题，主题包，以下是它提供的高阶组件： ThemeProvider 例如： const blackTheme = { color: 'black', }; const App = () => ( <ThemeProvider theme={blackTheme }> <MyComponent /> </ThemeProvider> ); 在 Aphrodite 和主题的案例中，作为另一个例子，你也可以使用 react-with-styles，它有实现
React 悬浮按钮组件 FloatingActionButton
import { createTheme, ThemeProvider } from '@mui/material/styles';const theme = createTheme({ palette : '#556cd6', }, secondary: { main: '#19857b', }, },});function App() { return ( <ThemeProvider > <Fab color="primary" aria-label="add"> <AddIcon /> </Fab>
