Usability of Custom CSS

[franekp]

Hi,

First, thanks for putting all the effort in this awesome project!

Recently I needed to inject custom CSS into AgGrid. I saw that there is a setting for this - nice! I figured out that I just need to write the CSS, and I would be done: AgGrid(df, ..., custom_css=".some_class {some-property: 0 1 2 3;} .other_class {some-property: 3 4 5;}")

Not so fast! This didn't work. So, I have looked into the AgGrid() docstring that this has to be a dict. Still no idea what should I put into the dict. Then, I had to search through the frontend code to find this:

type CSSDict = {[key: string]: {[key: string]: string}}

function getCSS(styles: CSSDict): string {
  var css = [];
  for (let selector in styles) {
    let style = selector + " {";
    
    for (let prop in styles[selector]) {
      style += prop + ": " + styles[selector][prop] + ";";
    }
    
    style += "}";
    
    css.push(style);
  }
  
  return css.join("\n");
}

function addCustomCSS(custom_css: CSSDict): void {
    var css = getCSS(custom_css)
    var styleSheet = document.createElement("style")
    styleSheet.type = "text/css"
    styleSheet.innerText = css
    console.log(`Adding cutom css: `, css)
    document.head.appendChild(styleSheet)
}

Adding support for plain strings in custom_css has 3 benefits:

• You don't have to document the CSSDict format, since everyone already knows how to write CSS as a string.
• Users can just write CSS, without the need to learn a new format. Python has multiline strings ''' ''', so it can be nicely formatted and retain all the readability benefits of your dict-based syntax.
• With larger stylesheets, users can load their custom_css from a .css file in their app and they can benefit from IDE support when writing CSS.

Many thanks, Franek

[77777myfriend]

Did anyone find the way to add custom css ? Actually, I want to change the theme color of ag-grid from 'blue' to 'red'