covert global token (function to class component)

Question

I am trying to convert a function into a class component. The following code was part of the main function as

Const ProductDetail = () => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();
const { Content } = Layout;
const navigate = useNavigate();
       
  return (  <Layout>
   
    <Content> ....

This has been converted into the following.

class ProductDetail extends Component {

  constructor(props) {
    super(props);
   ...

    }


Render() {
return ( <Layout>
       
        <Content> ....
 ..); } } export default withRouter(ProductDetail);

However, I dont know how to convert the following. How do I transform this?

 const {
          token: { colorBgContainer },
        } = theme.useToken();
    
    const { Content } = Layout;

Answer 1

Antd token is provided through a hook so the only way to get it is using function component. In your case, you need to convert back your class component to function or create a HOC to wrap your component and provide token as props

const withToken = (Component) => {
  return () => {
    const {
      token: { colorBgContainer },
    } = theme.useToken();
    return <Component token={token} />;
  };
};
export default withToken;

And define Content outside of Component. Your code will be

const { Content } = Layout;
class ProductDetail extends Component {
  constructor(props) {
    super(props);
    //...
  }

  render() {
    const { token } = this.props;
    return (
      <Layout>
        <Content>
          ...
        </Content>
      </Layout>
    );
  }
}
export default withRouter(withToken(ProductDetail));