Question 221194 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    The issue you are encountering is likely due to the incorrect syntax in the makeStyles hook from the FluentUI library.

    Unlike Material-UI’s makeStyles hook, FluentUI’s makeStyles hook does not support pseudo-classes like &:hover directly within the style object. Instead, FluentUI uses a different approach for handling hover styles.

    To apply hover styles to the Card component in FluentUI, you can use the classNames utility to define a separate CSS class for the hover styles and then use the makeStyles hook to apply that class conditionally based on hover state.

    Here’s an example of how you can achieve the hover effect with FluentUI’s makeStyles hook:

    import { makeStyles } from '@fluentui/react-components';

const useStyles = makeStyles({
  card: {
    width: '100px',
    height: '100px',
    borderRadius: '10px',
    transition: 'border-radius 0.3s, background 0.3s',
  },
  cardHover: {
    borderRadius: '20px',
    background: '#FF',
    boxShadow: 'another value here',
  },
});

function MyCard() {
  const styles = useStyles();
  const [isHovered, setIsHovered] = React.useState(false);

  const handleHover = (event: React.MouseEvent<HTMLElement>) => {
    setIsHovered(event.type === 'mouseenter');
  };

  return (
    <div
      className={`${styles.card} ${isHovered ? styles.cardHover : ''}`}
      onMouseEnter={handleHover}
      onMouseLeave={handleHover}
    >
      Your card content here
    </div>
  );
}

    In this example, we define two CSS classes using the makeStyles hook: card for the default styles and cardHover for the hover styles. We use the classNames utility to conditionally apply the cardHover class when the Card component is being hovered.

    Additionally, we use state (isHovered) to track the hover state of the card and update the styles accordingly. The handleHover function is called on onMouseEnter and onMouseLeave events to update the isHovered state.

    By combining these techniques, you can achieve the hover effect on the Card component in FluentUI.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search