Metronic with React
How to integrate Metronic into empty react project? Please, can you answer as simple as possible. I need to understand how to do it
Replies (9)
Hi,
Unfortunately, there is no simple answer, since implementation always depends on project complexity and requirements.
Here are the most important theme parts you have to include in your project:
Mandatory style file:
import "./_metronic/assets/sass/style.scss"The file requires bootstrap dependency and contains all core Metronic styles.
Ts component initialization wrappes: src/_metronic/layout/MasterInit.tsx. This wrapper initializes our custom ts components includ this wrapper to use drawers, menus, sticky elements, etc.
Keenicon styles.
import "./_metronic/assets/keenicons/duotone/style.css"
import "./_metronic/assets/keenicons/outline/style.css"
import "./_metronic/assets/keenicons/solid/style.css"Styling for our Keenicon, the main icon set used in the theme.
For usage examples, you can refer to our docs.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi,
Thank you for your response. I am still having troubles with Metronic integration. I created empty new React Typesscript project and placed metronic folder in there. By taking package.json file from react demo1 (your demo) I installed all node modules. So, all the links are conected. I checked every path in import links. However, styles are imported only partly. For exmaple, when I use btn btn-primary on my button/link, background is changing yes, but text is not white. Or other problems like that... Please, help
Hi,
If you included main _metronic/assets/sass/style.scss then you should be able to use all of the classes available in Metronic.
I assume that your issue might be related to your custom styles which override our style. Please inspect your button element and check what styles cause a problem.
You can find a button usage example in our documentation.
https://preview.keenthemes.com/metronic8/react/docs/buttons
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi,
I do not have any css or scss files in my project. Another example,
A div has this property:
.bg-light-warning {
background-color: var(--bs-warning-light) !important;
}
but the background is still white...
Hi,
Can you please attach the code of your button?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi, sorry. I found an error. The problem was in .env file. Metronic demo env contains style variables import.
I need to connect your env and try to customize it to my needs
Hi,
The variables in the .env file, such as VITE_APP_SASS_PATH and VITE_APP_SASS_VARIABLES_PATH, are just string references. They don't affect how the styles are loaded or the actual paths used for styles.
Did you manage to resolve your issue?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
If path in env is just a string, so I did not resolve problem... I do not know. I just created new typescript react project placed _metronic folder in it. Installed all packages. nd imported styles. However, they still not working correctly
