Hi, I'm currently looking at the trial of the React version of the Grid component, however, having trouble understanding how the styles should be loaded. I've installed the trial grid and the grid-react components via npm. According to the docs it says the styles can be loaded via app.css / js but it doesn't give any example.
Could you please assist in helping me progress past this point?
Hello Dave, yes, you are right, the above is one way of doing it.
Based of your question we have added the section to our integration guide. I'm posting it here so that you can choose your way (Note: it is the scheduler guide but the procedure is same for all Bryntum components):
Using Bryntum Scheduler themes
For the scheduler styling you must also import a CSS file that contains a theme for Bryntum Scheduler. There are two main ways of importing the theme.
Using one theme
The easiest way is to import the CSS file in your App.js or in App.scss.
Note: Importing theme in App.scss file is the preferred because this way we keep all styling-related code together in one file.
Using theme switching
Theme switching can be implemented with the help of <BryntumThemeCombo /> component. It has to be imported as any other component before it is used, for example:
import { BryntumThemeCombo, } from '@bryntum/scheduler-react';
// ... other code
return (
// ... other components
<BryntumThemeCombo />
// ... other components
);
CSS and fonts files that contain themes must be accessible in themes and themes/fonts subdirectories of the server public root. The easiest way of putting them there is to copy the files automatically during postinstall process in package.json:
Thanks for your detailed reply Saki, that's very helpful.
Can I also ask whether you can see anything in my example code as to why the data rows aren't visible? Oddly, when inspecting the HTML I can see the appropriate divs and data are there, and the text color is black, but for some reason, it's still not showing.
Post please your complete code. We'll run, investigate and debug it here. It must be something simple. I'd bet on a css collision, or on container not having a height, but we need to see it in action.