ant-design / antd-style

css-in-js library with antd v5 token system
https://ant-design.github.io/antd-style/
MIT License
187 stars 29 forks source link

🧐[问题]通过ThemeProvider传入customToken,再获取的时有时候为空,请问是什么原因? #66

Closed kevinffk closed 1 year ago

kevinffk commented 1 year ago

🧐 问题描述

通过ThemeProvider传入customToken,内容为compValue为50,在ASDiv组件内,通过createStyles创建useStyles,而函数参数token内,获取的token['compValue']有时候为空。下面有截图

💻 AS-demo

import React from 'react';
import ASDiv from '@/components/ASDiv';
import { ThemeProvider } from 'antd-style';
export default () => {
  return (
    <>
      <ThemeProvider customToken={{ 'compValue': 50 }}>
        <ASDiv/>
      </ThemeProvider>
      <hr />
      <ASDiv/>
    </>
  );
};

💻 ASDiv/index

import React from 'react';
import { createStyles } from 'antd-style';
const useStyles = createStyles(({css, token}) => {
  console.log('token', token['compValue']);
  return {
    myFont: css`
      height: var(--custom-height, 32px);
      font-size: var(--custom-font, 32px);
    `
  }
});
interface IProps {
}
const ASDiv: React.FC<IProps> = () => {
  const {styles } = useStyles();

  return (
      <div className={styles.myFont}>
        myFont
      </div>);
};
export default ASDiv;

🚑 其他信息

image

arvinxx commented 1 year ago

应该是你这边有个组件使用时没有包裹 ThemeProvider 吧?

image