小编ben*_*neb的帖子

例如，styled-components您可以执行以下操作：

const Div = styled.div`
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};
`;

render(
  <section>
    <Div>Normal</Div>
    <Div primary>Primary</Div>
  </section>
);

您能否使用 Material-UI v5 实用程序获得相同的结果，而不像styled() 文档styled中的示例那样向全局主题对象添加覆盖？

"overscroll-behavior: contain"我正在寻找一个 CSS 解决方案来实现但目标元素没有溢出时的确切行为。

我有一个带有弹出侧边栏/菜单的页面，在移动设备上，该页面占用 100vw 和 100vh（减去底部导航栏）并且不会溢出（没有足够的内容需要滚动条）。目前，当此侧边栏在移动设备上打开时，如果用户尝试滚动它，后台的主页面会滚动，在此应用程序中，由于延迟加载/无限滚动，这可能会导致不必要的数据库调用。

这是一个最小的codesandbox演示：

在 demo.js 的第 55 行，我已将overscrollBehavior: "contain"属性添加到 JSS 中，但是正如您所看到的，它不包含滚动链，除非您缩小浏览器的垂直高度以强制侧边栏的内容先溢出。（在 Chrome 上，overscrollBehaviorcodesandbox 编辑器中似乎有预期的行为，但在它自己的窗口中弹出时却没有。）

当然有一个 CSS 解决方案可以实现这种行为，而无需先让元素可滚动吗？

有趣的是，至少在 Firefox 上，如果您缩小垂直高度以强制在侧边栏上滚动，一旦您将浏览器大小调整回正常状态，该overscroll-behavior属性将继续包含滚动链，直到您刷新页面，这就是我的行为正在寻找，尽管显然是在初始页面加载时。

这是一个简单的代码笔，overscroll-behavior显示了溢出和不溢出的元素之间的差异（如果还不清楚的话）。我还在2018 年的CSS Tricks 论坛上发现了另一篇帖子，其中有人询问此行为，但没有解决方案。

我需要从其父组件中打开两个单独的 Material UI 对话框（条款和隐私），这是一个 Material UI“简单菜单”。我已经将它们导入并嵌套在父级中，我只是不知道如何让它们在作为单独文件的同时从父级打开。我玩这个类似的问题太久了，但无法让它发挥作用。谢谢。

父组件（菜单）：

import React from 'react';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import IconButton from '@material-ui/core/IconButton';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import Terms from './Terms';
import Privacy from './Privacy'

const More = () => {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <IconButton
        aria-label="more"
        aria-controls="simple-menu"
        aria-haspopup="true"
        onClick={handleClick}
        edge='end'
      >
        <MoreVertIcon />
      </IconButton>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl} …

在使用 MUIuseMediaQuery钩子时，我注意到我的 React 应用程序有问题并抛出错误，因为钩子最初无法识别正确的断点，然后页面很快会使用正确的值重新呈现。

例子：

const mobile = useMediaQuery((theme) => theme.breakpoints.only('mobile'));
console.log(mobile)

安慰：

false
true

这是怎么回事？

将长句作为h2?是有效的 HTML5吗？

例如：

<hgroup>
  <h1>
    Food & Drink Products
  </h1>
  <h2>
    There are 5000 food products near you in 100 categories from brands like FoodX, DrinkY, and FoodStuffsZ.
  </h2>
</hgroup>

或者p标签更合适？

我问是因为这段文字的重要性是 a 的重要性h2，但它读起来像一个段落，我找不到这样的例子，也找不到HTML 规范中提到标题长度的任何内容。