Css transition for grid

Hi,
I am using React Plotly in a project which offers the possibility to change the theme color (light and dark). Theme changing goes along with css transitions.
Transitions work fine for colors in plot title, axis title, plot_bgcolor, plotPaper etc. but not for grid lines - color changes immediately.

.crisp {
transition: stroke .2s ease;
}

even

* {
transition: stroke .2s ease;
}

or !import has no effect.

config:

layout={{
  title: 'My title',
  font: {
    color: themes[theme].text
  },
  showlegend: false,
  plot_bgcolor: themes[theme].plotPaper,
  paper_bgcolor: themes[theme].plotPaper,
  xaxis: {
    gridcolor: themes[theme].grid,
    tickfont: {
      color: themes[theme].text
    }
  },
  yaxis: {
    gridcolor: themes[theme].grid,
    tickfont: {
      color: themes[theme].text
    }
  }
}}

and themes:

const themes = {
  light: {
    background: 'rgb(240,240,240)',
    plotPaper: 'rgb(255,255,255)',
    grid: 'rgb(230,230,230)',
    text: 'rgb(70,70,70)'
  },
  dark: {
    background: 'rgb(40,40,40)',
    plotPaper: 'rgb(30,30,30)',
    grid: 'rgb(60,60,60)',
    text: 'rgb(150,150,150)'
  }
}

Any Ideas?