SPFX Web Part theme support

[PetrKotal21]

Hi guys,

is there any support or advice how to use Griffel with SharePoint Web Part supporting SharePoint theme? The idea is that styles are generated whenever theme or background section get changed. Right now I'm using TypeStyle but I was not able to do similar in Griffel. Can you advice please?

Basically I'm looking for something like this:

import { IReadonlyTheme } from "@microsoft/sp-component-base";
import { stylesheet } from "typestyle";

export const createStyles = (theme: IReadonlyTheme) => {
  return stylesheet({
    foo: {
      color: theme.semanticColors.bodyText,
      borderRadius: theme.effects.roundedCorner4,
      boxShadow: theme.effects.elevation4,
    }
  });
}

Thanks!
Petr

[layershifter]

Hey @PetrKotal21,

The goal of Griffel is to be able to do ahead of time compilation and there are things that we should limit. For example, the snippet below will not work:

// 🚨 Not real code, will *not* work
function App() {
  const theme = useTheme()
  const styles = makeStyles({
    root: {
      color: theme.semanticColors.bodyText
    }
  })
}

However, if theme is just values it will work:

const theme ={
  semanticColors: {
    bodyText: 'red'
  }
}

const useStyles = makeStyles({
    root: {
      color: theme.semanticColors.bodyText
    }
  })

// ✅ this will work
function App() {
  const classes = useStyles()
 // ...
}

Fair not: there is no much value in this as then theme switching could not work 🤔 Our recommendation is to use CSS variables for theming (it's how it works in Fluent UI React v9): #111