小编Nea*_*arl的帖子

许多React 测试库示例展示了如何使用getByText查询查找和单击按钮，如下所示：

fireEvent.click(getByText("Create"))

或者

userEvent.click(getByText("Create"))

但是，按钮没有文本而只有 SVG 图标是很常见的，例如 Material UI 的图标按钮或浮动操作按钮。有没有推荐的方法来查询和单击这些按钮？对于上下文，我使用的是配套用户事件库提供的更高级别的事件。

我知道如何在使用 html 单击按钮时下载文件

<a href="./abcf32x.pdf" download="How-to-download-file.pdf">
    <button>Download File</button>
</a>

但是使用 Material-UI 组件我该如何做到这一点

我有以下组件

<div>
  <Button
    variant="contained"
    color="#ffa726"
    size="large"
    startIcon={<GetAppIcon />}
  >
    Download Sample Method File
  </Button>
</div>

现在我想下载一个文件，其url是http://localhost:8000/static/sample_method.py

我不想在浏览器中打开链接然后另存为，而是应该直接下载。

我试图让AccordionMUI 组件在处于展开模式时不移动，也不将顶部和底部边距应用于某些元素。

示例如下，但它不起作用，我的组件仍然太“跳跃”（展开时它的宽度会增加，并且会添加一些不可见的边距）

...
expanded: {
  margin: '0px',
},
test: {
  '&$expanded': {
    margin: '0px',
  },
},
...
<Accordion
  classes={{
    root: classes.test,
    expanded: classes.expanded,
  }}
  expanded={expanded}
>
  <AccordionSummary
    onClick={() => setExpanded(!expanded)}
    classes={{
      expanded: classes.expanded,
    }}
  >
    The Summary
  </AccordionSummary>
  <AccordionDetails>
    <p>the details</p>
  </AccordionDetails>
</Accordion>

这是输出：

1. 我尝试制作一个应用程序，但是当我使用 时TextButton，我得到了两个按钮之间的空间
2. 我需要一张一张没有空间
3. 如果我使用Expanded小部件，ScrollChildView则不起作用
4. 我尝试但我无法清除这些东西。
5. 我尝试制作这种类型的TextButton.

任何人都知道或对此有任何想法？

    import "package:flutter/material.dart";
    import 'package:audioplayers/audio_cache.dart';

    class Account extends StatefulWidget {
    Account({Key key}) : super(key: key);

    @override
    _AccountState createState() => _AccountState();
    }

    class _AccountState extends State<Account> {
    @override
    Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Stack(
            children: [
              Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    TextButton(
                      child: Container(
                        child: Text(
                          'One',
                          style: TextStyle(color: Colors.white, fontSize: 10),
                        ),
                      ),
                      style: ButtonStyle(
                        backgroundColor:
                            MaterialStateProperty.all<Color>(Colors.red), …

FlatButton is deprecated and shouldn't be used. Used TextButton instead.

在我以前的FlatButton小部件上，我能够在按下时更改启动颜色。但现在我正在使用TextButton小部件，如何在小部件上MaterialApp ThemeData或直接在TextButton小部件上有效地更改其颜色。

目前这是我的 TextButton

TextButton(
  style: TextButton.styleFrom(
    primary: Colors.red,
    textStyle: TextStyle(
      color: Colors.black45,
      fontFamily: "Courier Prime",
    ),
    backgroundColor: Colors.transparent,
  ),
  onPressed: () {},
  child: Text(
    "Student",
    style: TextStyle(fontWeight: FontWeight.bold),
  ),
),

overlayColor is used to indicate that the button is focused, hovered, or pressed.

但我找不到这个overlayColor

我在使用react-hook-form 和material-ui 时遇到了困难。

我准备了一个codesandbox示例。

import { TextField } from "@material-ui/core";
import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css";

interface IMyForm {
  vasarlo: string;
}

export default function App() {
  const {
    handleSubmit,
    formState: { errors },
    register
  } = useForm<IMyForm>();

  const onSubmit = (data: IMyForm) => {
    alert(JSON.stringify(data));
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>First Name</label>
      <TextField
        variant="outlined"
        margin="none"
        label="Test"
        {...register("vasarlo", {
          required: "error text"
        })}
        error={errors?.vasarlo ? true : false}
        helperText={errors?.vasarlo ? errors.vasarlo.message : …

在 MUI v4 中，我的 JSS 类中有这样的内容：

paddingTop: theme.mixins.toolbar.minHeight + theme.spacing(1)

然而，在 v5 中，theme.spacing()返回字符串而不是数字。所以上面的语句将 paddingTop 设置为568px，那么56+'8px'现在用间距进行数学计算的正确方法是什么？

makeStyles 不再从 @mui/material/styles 导出。

即使我从@mui/styles项目中的各个地方导入，但它仍然显示此错误。
我删除node_modules并重新安装但不起作用

Material-UI 更新MUI 5建议停止使用makeStyles来定义样式。推荐使用情感CSS。我想知道如何设计抽屉组件的纸张元素的样式。我的目标是将自定义宽度移交给纸张元素。如何定义正确的 css 类？

抽屉沙盒

老方法makeStyles：

<Drawer
  classes={{
    paper: classes.paper,
  }}
  variant="persistent"
  anchor={anchor}
  open={isOpen}
>

选择切换按钮时，我无法设置背景颜色。现在，这些按钮可以工作，但在选择一个按钮时没有任何特定的颜色。我希望 Btn 1 有一个默认颜色，如果用户选择任何其他按钮，该按钮应该获得默认颜色。

<Grid container direction='column'>
        <ToggleButtonGroup
          value={title}
          exclusive
          size='small'
        >
          <ToggleButton onClick={this.handleOnClick}>
            Btn 1
          </ToggleButton>
          <ToggleButton onClick={this.handleOnClick}>
            Btn 2
          </ToggleButton>
          <ToggleButton onClick={this.handleOnClick}>
            Btn 3
          </ToggleButton>
      </ToggleButtonGroup>

      </Grid>