用法

¥Usage

如何将 Radix 颜色与各种样式解决方案结合使用。

Radix Colors 色阶只是简单的 JavaScript 对象，因此你可以轻松地将它们与你喜欢的样式方案结合使用。你可以在下面找到一些常用样式解决方案的使用示例。

¥Radix Colors scales are just simple JavaScript objects, so you can use them with your preferred styling solution easily. Below you can find usage examples for popular styling solutions.

原始 CSS

¥Vanilla CSS

Radix Colors 将颜色打包为原始 CSS 文件。你可以在使用打包器（例如 Parcel 或 Webpack）时直接将它们导入到文件中。

¥Radix Colors provides the colors bundled as raw CSS files. You can import them directly in your files when using a bundler, such as Parcel or Webpack.

/* Import only the scales you need */
@import "@radix-ui/colors/gray.css";
@import "@radix-ui/colors/blue.css";
@import "@radix-ui/colors/green.css";
@import "@radix-ui/colors/red.css";
@import "@radix-ui/colors/gray-dark.css";
@import "@radix-ui/colors/blue-dark.css";
@import "@radix-ui/colors/green-dark.css";
@import "@radix-ui/colors/red-dark.css";

/* Use the colors as CSS variables */
.button {
	background-color: var(--blue-4);
	color: var(--blue-11);
	border-color: var(--blue-7);
}
.button:hover {
	background-color: var(--blue-5);
	border-color: var(--blue-8);
}

<!-- For dark mode, apply a `.dark` class to <body> or a parent. -->
<body class="dark">
	<button class="button">Button</button>
</body>

styled-components

import {
	gray,
	blue,
	red,
	green,
	grayDark,
	blueDark,
	redDark,
	greenDark,
} from "@radix-ui/colors";
import styled, { ThemeProvider } from "styled-components";

// Create your theme
const theme = {
	colors: {
		...gray,
		...blue,
		...red,
		...green,
	},
};

// Create your dark theme
const darkTheme = {
	colors: {
		...grayDark,
		...blueDark,
		...redDark,
		...greenDark,
	},
};

// Use the colors in your styles
const Button = styled.button`
	background-color: ${(props) => props.theme.colors.blue4};
	color: ${(props) => props.theme.colors.blue11};
	border-color: ${(props) => props.theme.colors.blue7};
	&:hover {
		background-color: ${(props) => props.theme.colors.blue5};
		border-color: ${(props) => props.theme.colors.blue8};
	}
`;

// Wrap your app with the theme provider and apply your theme to it
export default function App() {
	return (
		<ThemeProvider theme={theme}>
			<Button>Radix Colors</Button>
		</ThemeProvider>
	);
}

emotion

除了导入方式不同之外，使用和组件渲染标题和正文几乎与上述 styled-components 文档相同。

¥Usage with emotion is almost identical to the styled-components docs above, aside from the different imports.

import {
	gray,
	blue,
	red,
	green,
	grayDark,
	blueDark,
	redDark,
	greenDark,
} from "@radix-ui/colors";
import { ThemeProvider } from "@emotion/react";
import styled from "@emotion/styled";

vanilla-extract

import {
	gray,
	blue,
	red,
	green,
	grayDark,
	blueDark,
	redDark,
	greenDark,
} from "@radix-ui/colors";
import { createTheme } from "@vanilla-extract/css";

export const [theme, vars] = createTheme({
	colors: {
		...gray,
		...blue,
		...red,
		...green,
	},
});

export const darkTheme = createTheme(vars, {
	colors: {
		...grayDark,
		...blueDark,
		...redDark,
		...greenDark,
	},
});

// Use the colors in your styles
export const styles = {
	button: style({
		backgroundColor: vars.colors.blue4,
		color: vars.colors.blue11,
		borderColor: vars.colors.blue7,
		":hover": {
			backgroundColor: vars.colors.blue5,
			borderColor: vars.colors.blue8,
		},
	}),
};

// Apply your theme to it
export default function App() {
	return (
		<body className={theme}>
			<button className={styles.button}>Radix Colors</button>
		</body>
	);
}

Previous安装

Next锯齿