使用

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

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

原生 CSS

Radix Colors 提供打包为原始 CSS 文件的颜色。当使用打包器（如 Parcel 或 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

除了导入方式不同外，emotion 的使用方法与上面 styled-components 文档几乎相同。

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>
  );
}

上一页安装

下一页别名

在 GitHub 上编辑此页面。