Поскольку useStyle() не работает с моим материальным интерфейсом v5xx (может кто-нибудь объяснить, почему?), я не понял, как передавать реквизиты в этой версии.

Например, для Material-UI v4 мы можем просто ввести следующее:

const Navbar = () => {
  const [open, setOpen] = useState(false);
  const classes=useStyles({open});
  return(....);
}

Но для v5 я могу использовать только Styled() вместо useStyle(), поэтому я запутался в этой части, я хочу сделать кнопку, которая отображает панель поиска, поэтому я создал так:

const theme = createTheme({
  palette: {
    primary: {
      main: "#FFE162",
      contrastText: "black",
    },
  },
});

// in this part i want my open function work
const StyleSearch = styled("div")(({ theme })() => ({
  display: "flex",
  alignItems: "center",
  backgroundColor: alpha(theme.palette.common.white, 0.4),
  "&:hover": {
    backgroundColor: alpha(theme.palette.common.white, 0.6),
  },
  borderRadius: theme.shape.borderRadius,
  width: "50%",
  [theme.breakpoints.down("sm")]: {
    display: (props) => (props.open ? "flex" : "none"),
  },
}));

const Navbar = () => {
  const [open, setOpen] = useState(false);
  function handleOpen() {
    setOpen(true);
  }
  return( 
      <...>
        <StyleSearchBtn onClick={handleOpen} />);
      <.../>
}

Как вы можете видеть, open не установлен, как передать это реквизиту.

2
YouCanCallMe Syarif 26 Янв 2022 в 15:44
1
Добавьте реквизит и используйте { theme, open } как обычно.
 – 
Chris G
26 Янв 2022 в 15:50
1
)
 – 
Anshuk Sharma
26 Янв 2022 в 15:56

1 ответ

Лучший ответ

Он несовместим с новой версией React, так как вы можете проверить их документацию.

⚠️ @mui/styles — это устаревшее решение для оформления MUI. Он устарел в v5. Это зависит от JSS как решения для стиля, которое больше не используется в @mui/material. Если вы не хотите, чтобы в вашем пакете были и эмоции, и JSS, обратитесь к документации @mui/system, которая является рекомендуемой альтернативой.

⚠️ @mui/styles не совместим с React.StrictMode или React 18.

Здесь у вас есть документация, необходимая для правильного использования styled().

В вашем примере вы можете передавать реквизиты в обычном режиме, например:

<StyleSearch props={theme, open} />

Или

<StyleSearch open={open} theme={theme} {...props} />
1
Raphael Marques 26 Янв 2022 в 15:59