재료.UI 사용자 지정 호버 스타일

재료.UI 사용자 지정 호버 스타일

저는 React에 처음 온 사람인데, Material UI에서 클래스를 덮어쓰는 방법을 좀 헷갈립니다.예시를 보고 흉내를 내려고 했지만 내가 원하는 대로 되지 않는 것 같았다.

기본적으로 테이블 행의 호버에서는 현재와 다른 배경색을 설정하고 싶습니다.

저의 접근방식은 다음과 같습니다.

const styles = theme => ({
  root: {
    width: "100%",
    marginTop: theme.spacing.unit * 3
  },
  table: {
    minWidth: 1020
  },
  tableWrapper: {
    overflowX: "auto"
  },
  hover: {
    "&:hover": {
      backgroundColor: 'rgb(7, 177, 77, 0.42)'
    }
  }
});

return <TableRow hover classes={{hover: classes.hover}} role="checkbox" aria-checked={isSelected} tabIndex={-1} key={n.row_id} selected={isSelected}>
     {this.insertRow(n, isSelected, counter, checkbox)}

;

export default withStyles(styles)(EnhancedTable);

도와주셔서 감사합니다!

TableRow 키를 className으로 정의한 다음 해당 클래스 이름 바로 위에 개체로 호버 스타일을 배치해야 합니다.

const styles = theme => ({
  ...
  tr: {
    background: "#f1f1f1",
    '&:hover': {
       background: "#f00",
    },
  },
  ...
});

return <TableRow className={props.classes.tr} ...>

다른 예에서는 다음과 같습니다.

const styles = {
  tr: {
    background: "#f1f1f1",
    '&:hover': {
      background: "#f00",
    }
  }
};

function Table(props) {
  return (
    <Table>
      <TableRow className={props.classes.tr}>
        {"table row"}
      </TableRow>
    </Table>
  );
}

export default withStyles(styles)(Table);

간단한 문 추가로 호버 속성을 사용자 정의할 수 있습니다.

'&:hover': {
background: "rgb(7, 177, 77, 0.42)",    
             
}

그렇게,

tableWrapper: {
    overflowX: "auto",
  
  hover: {
    "&:hover": {
      backgroundColor: 'rgb(7, 177, 77, 0.42)'
    },
}

커스텀 호버 애니메이션을 만들고 싶다면 이 스타일을 시도해 보십시오.
이 코드 블록은 호버에 있는 카드의 색상을 변경합니다.

상세한 것에 대하여는, 여기를 참조해 주세요.MUI로의 이행

card : {
    transition: theme.transitions.create(["background", "background-color"], {
      duration: theme.transitions.duration.complex,
    }),
    "&:hover": {
      backgroundColor: "#333",
    },
}

나의 접근법은 다음과 같다.

const checkBoxStyles = () => ({
  root: {
    '&$checked': {
      color: '#4885FB'
    },
    '&$disabled': {
      color: '#96C9FF'
    },
    '&:hover': {
      backgroundColor: '#E4F2FF !important'
    }
  },
  checked: {},
  disabled: {
    color: '#96C9FF'
  }
});

const CustomCheckbox = withStyles(checkBoxStyles)(Checkbox);

주의사항:!important를 지정하지 않을 경우.체크 박스를 온으로 하면, 온 호버의 배경색이 오버라이드 됩니다.

머티리얼 UI 버전 4를 사용하고 있습니다.

언급URL : https://stackoverflow.com/questions/52596070/materialui-custom-hover-style