1. Home
  2. Development
  3. RE: using react-bootstrap instead of clay-ui

RE: using react-bootstrap instead of clay-ui

reza gholipour, modified 5 Years ago.
using react-bootstrap instead of clay-ui
New Member Posts: 17 Join Date: 4/9/20 Recent Posts
Hi
Can I use  react-bootstrap library instead of clay-ui for my Liferay's UI?
reza gholipour, modified 5 Years ago.
RE: using react-bootstrap instead of clay-ui
New Member Posts: 17 Join Date: 4/9/20 Recent Posts
Any suggestion??
thumbnail
Christoph Rabel, modified 5 Years ago.
RE: using react-bootstrap instead of clay-ui
Liferay Legend Posts: 1555 Join Date: 9/24/09 Recent Posts
The answer is probably Yes. I would create a theme, include the necessary files and see what happens.
You will probably experience some clashes, e.g. when we used materialize (https://materializecss.com/), we found that Liferay and Materialize use the "modal" class. We needed to remove the import for modal.scss from the materialize scss file before building it, otherwise all modal dialogs simply broke.
And you will probably experience some "style clashes" and fix a few things.
reza gholipour, modified 5 Years ago.
RE: using react-bootstrap instead of clay-ui
New Member Posts: 17 Join Date: 4/9/20 Recent Posts
Thanks for your guide.

Actually I am so newbie in Liferay.

If possible, help me where should I start?
thumbnail
Christoph Rabel, modified 5 Years ago.
RE: using react-bootstrap instead of clay-ui
Liferay Legend Posts: 1555 Join Date: 9/24/09 Recent Posts
And I have never even looked at react-bootstrap. If I read it correctly react-bootstrap is just react on top of bootstrap. Well, Liferay is bootstrap based, so bootstrap is already there.

I would create a theme and create a test application and check what has to be changed. It could be quite some work, possibly tedious, since you probably need to look at all components (fields, buttons, messages, ...)
I am just guessing here, I am not the guy who creates/maintains themes, but when you create a theme, maybe it helps to avoid importing atlas? There should be less styles and it should be closer to bootstrap then.
https://help.liferay.com/hc/en-us/articles/360017887952-Importing-Clay-CSS-into-a-Theme-