In Grafana’s UI there are numerous CSS class names that, for example, look like:
.css-mh1vgn-button. This seems to be coming as a result of using Emotion library.
However it causes an immense amount of pain for developers trying to support own custom CSS theme for Grafana.
Because whenever Grafana source code goes through a change in any of the React components’ CSS styles, Emotion library would re-generate a new CSS class name for it. So, let’s say, we in our project have just made our own custom style overriding the styles from
.css-4x8o14. If in the next version upgrade of Grafana there were any changes in the React component that was originally using styles from
.css-4x8o14, the class name
.css-4x8o14 would now be gone, as Emotion library generates a new hashed class name for it. Hence, our custom style for
.css-4x8o14 would no longer take any effect. We would have to manually track what is the new class name and add support for it once again.
Would there be a chance if you could investigate this and in future provide better CSS class naming conventions in Grafana for cases using Emotion library?
It would be great if CSS class names were fully descriptive and unique per UI component they correspond to. If Emotion library doesn’t allow setting a fully custom CSS class name instead of a dynamically generated hashed one (e.g. having something like ‘.data-source-core-button’ instead of
.css-1e35lzp), it probably allows setting a custom ending at least. For example, currently in toolbar some of the buttons use these kinds of CSS class names:
.css-1t4b87h-toolbar-button (most of the buttons in the topmost toolbar),
.css-cdo4z7-toolbar-button (‘Apply’ button in the toolbar, which has a different look from the other buttons). In case there is a change coming, only the hashed prefix would get re-generated while the ‘-toolbar-button’ ending would stay the same (which solves the problem as we can use a CSS selector
[class$="toolbar-button"] to tackle it). However, a big deal of CSS class names in Grafana either don’t have any non-hashed ending at all, or it’s not unique per component. E.g. this case with
-toolbar-button button, there are 2 different types of buttons in the toolbar that look differently, and the trick with the CSS selector can’t be applied because of that. It would be a great help if the CSS class name suffixes reflect on that - having separate names like e.g.
Would be very grateful for your help!