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

Can Material UI be hovered without SX props in Reactjs?

`how can i put a hover effect without using sx pros on Material UI?

I want to give a Hover effect on this code ( I wrote a hover here on the code) but i have no idea how to do it without using the sx props.

import React from 'react'
import { Box } from '@mui/material'
import { MuiSelect } from './MuiSelect'

export const MuiLayout = () => {
  return (
    <>
    <Box 
    sx={{
        backgroundColor: 'primary.main',
        color: 'white',
        height: '100px',
        width: '50%',
        padding: '16px',
        '&:hover': {
            backgroundColor: 'primary.light',
        },
    }}>
        <MuiSelect />
    </Box>
    <Box 
    display= 'flex'
    height=  '100px'
    width=   '768px'
    bgcolor= 'success.light'
    // HoVER HERE
    p={2}
    >

    </Box>
    </>
      )
}
Tags:

2

Answers


  1. 0

    The onHover event handler does not exist in React. Therefore, React has provided the following event handlers for detecting the hover state for an element:
    onMouseEnter and onMouseLeave .

    this is an example using your code :

    import React from "react";
import { Box } from "@mui/material";
// import { MuiSelect } from './MuiSelect'

const MuiLayout = () => {
  let [over,setOver]=React.useState(false);

   let boxstyle={
    backgroundColor:'#1976d2'
  }

  if(over){
    boxstyle.backgroundColor="#42a5f5";
  }
  else{
    boxstyle.backgroundColor='#1976d2';
  }
  return (
    <>
      <Box
        style={boxstyle}
        onMouseEnter={()=>setOver(true)} 
        onMouseLeave={()=>setOver(false)}
        sx={{
          // backgroundColor: "primary.main",
          color: "white",
          height: "100px",
          width: "50%",
          padding: "16px",
          // "&:hover": {
          //   backgroundColor: "primary.light"
          // }
        }}
      >
        <p> test </p>
      </Box>
      <Box
        display="flex"
        height="100px"
        width="768px"
        bgcolor="success.light"
        // HoVER HERE
        p={2}
      ></Box>
    </>
  );
};

export default MuiLayout;

    NOTE : you might no be able to access the default values of the mui palette
    (primary.light , primary.main ….). instead use hexadecimal color check t mui docs for these default values

    Login or Signup to reply.
  2. 0

    Can you explain why you don’t want to use sx prop? It is there for that kind of usage.

    You can go without sx with the following approaches:

    You can use styled from @mui/material/styles

    const StyledBox = styled(Box)`
   &:hover {background-color: ${({theme}) => theme.palette.primary.light}
`

    and in your component use <StyledBox {...props}>{children}</StyledBox>

    Or you can use theme component overrides. Add class to your component or create special prop variant for it and override the style in the theme

    https://mui.com/material-ui/customization/theme-components/

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

Back To Top
Search