标签: sx

我有一个分隔线模板，我想通过将其转换为水平虚线分隔线来自定义它。但我不知道如何覆盖它，特别是如果我什至通过应用 borderRadius 进行 sx 编辑，它不会改变分隔线。

源代码：

import * as React from "react";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";
import Divider from "@mui/material/Divider";

const style = {
  width: "100%",
  maxWidth: 360,
  bgcolor: "background.paper"
};

export default function ListDividers() {
  return (
    <List sx={style} component="nav" aria-label="mailbox folders">
      <ListItem button>
        <ListItemText primary="Inbox" />
      </ListItem>
      <Divider sx={{ borderRadius: 1 }} />
      <ListItem button divider>
        <ListItemText primary="Drafts" />
      </ListItem>
      <ListItem button>
        <ListItemText primary="Trash" />
      </ListItem>
      <Divider sx={{ borderRadius: 1 …

MUIsx的 prop对于速度和代码可读性很有用（合理），但它可能会导致许多不必要的重新渲染（这会导致性能下降）。sx

const MyComponent = () => {

  return
    <>
      <Box sx={{color: "red"}}> I am a bit static </Box>
      <Box sx={{width: window.innerWidth + "px"}}> I am so dynamic! </Box>
    </>  
};

const MyComponent = () => {
  const boxStyle = useMemo(() => ({color: "red"}), [])

  return
    <>
      <Box sx={boxStyle}> I am a bit static </Box>
      <Box sx={{width: window.innerWidth + "px"}}> I am so dynamic! …