标签: material-ui

我想为 TextInput 实现以下 UI。它应该在末尾有一个固定的文本以及一个可以提供输入的占位符。

注意：固定文本不应该是可编辑的。

是否可以向材质 UI 弹出组件添加箭头？

谢谢，

我是 React js 的新手，我想创建一个像 typeform 这样的表单，但我没有使用 typeform。我有一个包含 5 个问题的列表，我希望在用户单击“下一步”后，它会一一出现，并具有像打字机一样的滑动效果。

这个问题也可能来自 json 数据。我刚刚使用了一种方法。

这是沙箱链接：https://codesandbox.io/s/brave-firefly-2c47h

Material-ui 的 Card 组件可以有一个 CardMedia 组件作为子组件，它接受图像源作为 prop。另一方面，盖茨比图像需要它自己的源作为道具（固定或流动）。

<Card>
  <CardHeader title={title}/>
  <CardMedia src={image.localFile.childImageSharp.fixed} component={Img} /> 
</Card>

这个问题有什么解决方法吗？

我正在尝试使用 Material UI 创建一个基本的导航栏。Material-UI 文档站点https://material-ui.com/components/app-bar/上的样板模板在浏览器中返回以下错误：

“尝试导入错误：‘@material-ui/icons’不包含默认导出（导入为“MenuIcon”）。”

我已经使用 npm 安装了 @material-ui/core 和 @material-ui/icons。参见 package.json：

{
  "name": "profile_v4",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@testing-library/jest-dom": "^5.11.8",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.6.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },

我的 Navbar.js 组件文件：

import React from 'react'
import { AppBar, Toolbar, IconButton, Typography, Button } from '@material-ui/core';
import MenuIcon from "@material-ui/icons";

const Navbar = () => {
    return (
        <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" className={classes.menuButton} …

我尝试了很多方法，但并不总是有效。我的意思是..它确实找到了该元素并单击它...但并不总是为下拉输入字段添加值。我无法继续测试，因为下拉列表是我需要的必填字段。 下拉输入字段不能为空。

Cypress.Commands.add("selectTooltipDropdownOption", (optionText, inputSelector) => {
    cy.getCyInput(inputSelector,{timeout:10000}).click();

    cy.getCyRole("menu").children('li').contains(optionText).trigger("click", { timeout: 10000 });
  
    cy.getCyInput(inputSelector)
      .invoke("prop", "defaultValue")
      .should("contain", optionText);
  });

我该怎么做才能使遗嘱cy.getCyInput("dropdowninputField")始终具有价值而不是空的？

下拉菜单似乎不是选择类型；它是一个经典的选择组件，具有来自 Material UI 的附加样式。这是它在 HTML 中的样子。我将尺寸做得更小，以便更容易查看，并且位置是根据元素或组件的 ID 动态变化的。

Cypress.Commands.add("selectTooltipDropdownOption", (optionText, inputSelector) => {
    cy.getCyInput(inputSelector,{timeout:10000}).click();

    cy.getCyRole("menu").children('li').contains(optionText).trigger("click", { timeout: 10000 });
  
    cy.getCyInput(inputSelector)
      .invoke("prop", "defaultValue")
      .should("contain", optionText);
  });

当前，我的列表全部折叠，但是它们链接到一个状态为“打开”，因此，如果我打开一个列表，则所有其他列表都打开。保持崩溃彼此独立而不对每个列表使用很多状态的最佳方法是什么。

编辑：该应用程序正在经历无限循环

App.tsx

interface IState {
error: any,
intro: any,
threads: any[],
title: any,
}

export default class App extends React.Component<{}, IState> {
    constructor (props : any) {
        super (props);

        this.state = {
            error: "",
            intro: "Welcome to RedQuick",
            threads: [],
            title: ""
        };

        this.getRedditPost = this.getRedditPost.bind(this)
        this.handleClick = this.handleClick.bind(this)
    }

    public getRedditPost = async (e : any) => {
        e.preventDefault();

        const subreddit = e.target.elements.subreddit.value;
        const redditAPI = await fetch('https://www.reddit.com/r/'+ subreddit +'.json');
        const data = await redditAPI.json();

        console.log(data);

        if (data.kind) …