asked on August 3, 2019
I can't find the docs for how to style flexmonster in React. When I bring it in it is completely unstyled, a mess, as you can see in the screenshot
import React from "react";
import * as FlexmonsterReact from "react-flexmonster";
function Flexmonster() {
const report = {
dataSourceType: "elasticsearch",
node: "http://localhost:9200",
index: "fivesixfromlog"
};
return (
<div>
<FlexmonsterReact.Pivot
toolbar={true}
report={report}
width="100%"
/>
</div>
);
}
export default Flexmonster;
⋅ August 5, 2019
Hello,
Thank you for posting your question here.
We have recently updated an integration approach. For now, it requires importing .CSS files explicitly.
Please refer to our GitHub sample project: https://github.com/flexmonster/pivot-react/blob/master/ES6/src/index.js#L1.
Our team will provide the necessary update to the documentation in the nearest time.
Please let us know if everything works fine for you.
Regards,
Dmytro
⋅ May 29, 2025
Hi Dmytro,
The link you have shared is broken. I facing kind of the same issue related to the react-flexmonster style .css file.
The .css file not in lib npm package folder.
⋅ May 30, 2025
Hello, Lenon!
Thank you for reaching out to us.
Here is the updated link that shows how to include the CSS explicitly into your React application: https://github.com/flexmonster/pivot-react/blob/master/ES6/src/main.jsx.
Kindly note that you can find the flexmonster.css file in node_modules/flexmonster/ folder.
Hope it helps.
Kind regards,
Solomiia
