$ cnpm install @theme-ui/core
@theme-ui/core provides minimal React support for lightweight usage.
npm i @theme-ui/core @emotion/react
/** @jsxImportSource @theme-ui/core */
import { ThemeProvider } from '@theme-ui/core'
export function App() {
return (
<ThemeProvider theme={{ colors: { primary: '#33e' } }}>
<h1 sx={{ color: 'primary' }}>Hello</h1>
</ThemeProvider>
)
}
If you already use theme-ui package, the batteries-included version of Theme
UI, you don't need to install @theme-ui/core separately — it's already in your
node_modules, and theme-ui reexports everything from it.
jsx — JSX function to create React elements supporting sx propThemeProvider — a context provideruseThemeUI — a hook to access your thememerge — an utility function to deeply merge themes togetherNote that @theme-ui/core doesn’t add global or root styles to
<html>/<body>. Refer to the
Global Styles docs for how to add
global styles.
As @theme-ui/core defines jsx function and types for it, you can use it to
configure JSX runtime without installing theme-ui package.
/jsx-runtimejsxjsxs/jsx-dev-runtimejsxDEVCopyright 2013 - present © cnpmjs.org | Home |