React and Fluent UI style - type 'string' is not assignable to type 'undefined'

Question

I have a Card component from FluentUI library. I want to hover over the card and change the color of the border. This is my attempt to do it but for some reason I am having below error:

type 'string' is not assignable to type 'undefined'

    const useStyles = makeStyles({
        card: {
            width: '100px',
            height: '100px',
            "&:hover": {
                borderRadius: "20px",
                background: "#FF",
                boxShadow: 'another value here',
            },
        },
    });

Why all the values that I am trying to initialize in the &:hover section are complaining with the same error? How can I initialize them?

score 0 · Answer 1 · answered Aug 09 '23 at 09:06

It has nothing to do with your &:hover selector as such. GriffelJS (the underlying lib in FluentUI) doesn't support CSS shorthands (like background or borderRadius) directly. Thats why their type is undefined instead of string. You have to use the specific CSS properties instead. For some CSS shorthands GriffelJS also has a helper function you can use:

'&:hover': {
    ...shorthands.borderRadius('20px'),
    backgroundColor: '#FF0000',
    boxShadow: '...',
}

You find more infos to shorthands in GriffelJS in their documentation GriffelJS - shorthands

score -1 · Answer 2 · answered Aug 02 '23 at 05:17

The error you are encountering, "type 'string' is not assignable to type 'undefined'," is likely because the makeStyles function from the library you are using expects certain values to be provided as specific types, and you are passing incorrect values.

It seems you are trying to use the makeStyles hook from Material-UI rather than Fluent UI. The makeStyles hook is designed to work with Material-UI's styling solution, and the format for specifying styles is slightly different from regular CSS.

To fix the issue and apply styles on hover, you need to use the makeStyles hook provided by Material-UI. Here's the corrected code:

import { makeStyles } from '@material-ui/core/styles';
    
    const useStyles = makeStyles({
      card: {
        width: '100px',
        height: '100px',
        borderRadius: '10px', // Initial border-radius value
        transition: 'border-radius 0.3s, background 0.3s', // Add transitions for smooth hover effect
        '&:hover': {
          borderRadius: '20px', // New border-radius value on hover
          background: '#FF', // New background color on hover
          boxShadow: 'another value here', // Add your desired boxShadow value for the hover state
        },
      },
    });
    
    function MyCard() {
      const classes = useStyles();
    
      return <div className={classes.card}>Your card content here</div>;
    }

Make sure you have installed Material-UI (npm install @material-ui/core) and imported the necessary components correctly.

With these changes, when you hover over the card, the border-radius, background color, and boxShadow will be updated according to the styles specified in the &:hover section.

Thank you for your prompt response. the `makeStyles` I am trying to use come from `"@fluentui/react-components` which is the same library I am importing the Card from. Your answer makes total sense, (e.g.: I am not passing the expected values), but I wonder if you know where to find documentation/examples on how the values need to look like? — user3587624, Aug 02 '23 at 05:24

React and Fluent UI style - type 'string' is not assignable to type 'undefined'

2 Answers2