How to add custom styles in <head>?

2 Replies

kapa.ai•13mo ago

Hi @mflash.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Refine is a headless framework and does not include UI components by default. However, it supports Material UI and Ant Design for quick and easy solutions. You can create your custom styles in your refine project. To create global style rules for your app, navigate to the src directory, create a new file styles.css, and include your custom CSS code. For example:

@import url("<https://fonts.googleapis.com/css2?family=Montserrat&display=swap">);  
  
* {  
 margin: 0;  
 padding: 0;  
 box-sizing: border-box;  
 font-family: "Montserrat", sans-serif;  
}  
  
body {  
 padding: 20px;  
 height: 100vh;  
 background-color: #fee140;  
 background-image: linear-gradient(90deg, #fee140 0%, #fa709a 100%);  
}

@import url("<https://fonts.googleapis.com/css2?family=Montserrat&display=swap">);  
  
* {  
 margin: 0;  
 padding: 0;  
 box-sizing: border-box;  
 font-family: "Montserrat", sans-serif;  
}  
  
body {  
 padding: 20px;  
 height: 100vh;  
 background-color: #fee140;  
 background-image: linear-gradient(90deg, #fee140 0%, #fa709a 100%);  
}

Then, include the style sheet in the index.tsx file:

import React from "react";  
import ReactDOM from "react-dom";  
import "styles.css";  
  
import App from "./App";  
  
ReactDOM.render(  
 <React.StrictMode>  
 <App />  
 </React.StrictMode>,  
 document.getElementById("root")  
);

import React from "react";  
import ReactDOM from "react-dom";  
import "styles.css";  
  
import App from "./App";  
  
ReactDOM.render(  
 <React.StrictMode>  
 <App />  
 </React.StrictMode>,  
 document.getElementById("root")  
);

This way, your custom styles will be applied globally to your application. For more information, refer to the refine tutorials for UI implementation examples (https://refine.dev/docs/#introduction). Source: React Search Bar and Filtering (https://refine.dev/blog/react-search-bar-and-filtering) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@204169884727246849> kapa.ai is still learning and improving, please let us how it did by reacting below