typescript 如何在我的自定义组件中使用antd主题标记?

mrfwxfqh  于 2023-05-30  发布在  TypeScript
关注(0)|答案(1)|浏览(159)

我想使用antd theme tokens来样式化我的自定义组件?可能有一种感情似的方式:

// style.ts
export default createStyles((token) => ({
  foo: {
    color: token.colorPrimary,
  }
})

// index.tsx
import styles from './style';

const FooBar = () => {
  return (
    <div className={styles.foo}>
      FooBar
    </div>
  );
};

或者也许有更好的方法来做到这一点?除了useToken和use in style之外,文档中几乎没有任何内容。

kt06eoxx

kt06eoxx1#

如何通过控制组件来使用antd主题token?

Antd有非常有用的主题标记。像您的设计系统一样定制。我们也可以避免手动样式化。我们可以通过主题标记控制组件。非常有用。
对于override theme token,你可以在这里查看文档ant theme token override
请看我的例子
example

export const theme = Object.freeze({
  // apply ant design theme
  token: {
    // primary color
    colorPrimary: "#5C469C",
    colorLink: "green",
    // hover color
    colorPrimaryHover: "#5C469C",
    colorLinkActive: "#00AA67",
    colorLinkHover: "#00AA67",
    wireframe: false,
    fontSize: 14,
    borderRadius: 4,
    sizeStep: 4,
    fontFamily: `'Nunito', 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif`,
    lineHeight: 1.5714285714285714,
    colorError: "#ED0131"
  },
  components: {
    Radio: {
      // orange color
      colorPrimary: "orange"
    },
    Input: {
      controlHeight: 48,
      borderRadius: 4
    },
    Button: {
      controlHeight: 60,
      borderRadius: 10
    },
    Select: {
      controlHeight: 48,
      borderRadius: 4
    }
  }
});
<ConfigProvider theme={theme}>
   <div className="App">
    <h1>Hello CodeSandbox</h1>
    <h2>Start editing to see some magic happen!</h2>
   </div>
   <Form>
    <Form.Item>
      <Input />
    </Form.Item>
    <Form.Item>
     <Radio.Group>
       <Radio value={true}>Yes</Radio>
       <Radio value={false}>No</Radio>
     </Radio.Group>
    </Form.Item>
    <Button type="primary">Send</Button>
    <Button type="ghost">Send</Button>
  </Form>
</ConfigProvider>

相关问题