Using ant-design with Frontity

🙋Get Help
1

Hello,

im currently trying to get used to Frontity and React as a whole, however i have the problem that for some reason i can use ant-d components, these components will be rendered but the styles won’t be shown at all.
Anybody else experienced this?
Thanks

3

Hi @erhannnn

Welcome to the Community!

Frontity uses CSS-In-JS by default and recommends it to have a great performance of your project

https://docs.frontity.org/learning-frontity/styles

Taking this into account, if you decide to go with a non CSS-In-JS solution you can also do it by adding Global styles to the project (taking into account the penalization to the performance → the final bundle won’t be as small as it would by with a CSS-In-JS solution)

To load the styles of AntD you’ll have to add them as Global styles of your project. To do so you have to import them as strings and use Global and css from Frontity as shown below. It’s needed to be done this way because we do a lot of CSS optimization.

import React, { useState } from "react";
import { Global, css, connect, styled, Head } from "frontity";

...

import { DatePicker, message } from 'antd';
import antdGlobalStyles from 'antd/dist/antd.css'; 

const Theme = ({ state }) => {
  
  ... 
  return (
      <>
        
        {/*  ... */}

        <Global styles={antdGlobalStyles} />

        {/*  ... */}

        <div style={{ width: 400, margin: '0 auto' }}>

          {/*  ... */}          

          <h2>AntD DatePicker Component</h2>
          <DatePicker onChange={handleChange} />
          <div style={{ marginTop: 16 }}>
            Selected Date: {date ? date.format('YYYY-MM-DD') : 'None'}
          </div>
        </div>

      
      </>
    
  );
};

export default connect(Theme);

...

Here you have a demo of a project using an AntD component that shows how to load AntD styles globally in a Frontity project

5

Great it worked!
Thanks alot for your help, i’ll need to figure out if i should use this or not now :smiley: