小编hot*_*dev的帖子

我将像这样打破一行网格项目。 正如您所看到的图像，网格的其余空间应该是空的。

<Grid container spacing={3}
  <Grid item xs={12}>
    "Grid Item xs={12}"
  </Grid>
  <Grid item xs={4}>
    "Grid Item xs={4}"
  </Grid>
  // empty space
  <Grid item xs={12}>
    "Grid Item xs={12}"
  </Grid>
</Grid>

我应该使用内部grid container吗？或者我应该使用display flex？

我目前正在将使用creat-react-app创建的项目迁移到next.js项目。

我面临的一件事是将matchPath函数从react-router-dom迁移到某种next.js函数，比较当前路径名和一种传递的href路由名称，以便实现并选择当前导航项。

import { useLocation, matchPath } from 'react-router-dom';

const NavBar = ({ item, pathname }) => {
  const open = matchPath(pathname, {
    path: item.href,
    exact: false
  });
  ...
}

我能够pathname使用next/router获取当前电流，但之后，我不知道如何比较它们。

import { useRouter } from 'next/router';

const NavBar = () => {
  const { pathname } = useRouter();

  ...
}

这种情况下，该如何解决呢？

提前致谢。

我正在使用 TypeScript（v4.2.3）和 Material UI（v4.11.3），并尝试将自定义道具传递给styled组件。

import React from 'react';
import {
  IconButton,
  styled,
} from '@material-ui/core';

const NavListButton = styled(IconButton)(
 ({ theme, panelOpen }: { theme: Theme; panelOpen: boolean }) => ({
   display: 'inline-block',
   width: 48,
   height: 48,
   borderRadius: 24,
   margin: theme.spacing(1),
   backgroundColor: panelOpen ? theme.palette.secondary.dark : 'transparent',
 }),
);

...

const Component: React.FC<Props> = () => {
  return (
    <NavListButton panelOpen={true} />
  );
};

这工作正常，但如果我检查控制台，它会遇到错误。

Warning: React does not recognize the `panelOpen` prop on a DOM element. If …

我想更改 Material UI 单选按钮的外环。

https://material-ui.com/components/radio-buttons/

现在我有这个：

但我想得到的是

我尝试过用PrivateRadioButtonIcon-layer蓝色和MuiSvgIcon-root黑色设计班级风格，但我找不到一种风格设计方法PrivateRadioButtonIcon-layer

我试图div通过添加 a 在特定断点处设置元素的边距{screen}: prefix，但它不起作用。我尝试过的如下；

<div className={'flex justify-center'}>
  <div className={'w-full my-8 sm:my-20 md:my-48'}>
    <div {...props}>
      {children}
    </div>
  </div>
</div>

检查模式，我可以确定只有my-8类有效。

Tailwind 的所有类都工作良好，flex响应式也能正常工作，但响应式的边距（填充）不起作用。我使用 Next.js 和 Tailwind CSS。

我试图通过以下方式传递主题：

declare module "@mui/styles/defaultTheme" {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  interface DefaultTheme extends Theme {}
}

ReactDOM.render(
  <StyledEngineProvider injectFirst>
    <ThemeProvider theme={theme}>
      <Main />
    </ThemeProvider>
  </StyledEngineProvider>,
  document.getElementById("root")
);

我尝试通过以下方式来阅读：

import { styled } from "@mui/system";

type StyledTabProps = {
  isActive: boolean;
};

const StyledTab = styled("div", {
  shouldForwardProp: (prop) => prop !== "isActive"
})<StyledTabProps>(({ theme, isActive }) => {
  console.log("theme", theme);
  return {
    color: isActive ? "red" : "blue"
  };
});

我尝试传递的主题与最终获得 console.logged 的​​主题不同（调色板对象中缺少属性）

问题的代码沙箱可以在这里找到：

https://codesandbox.io/s/wandering-https-ubhqs?file=/src/Main.tsx