Material-ui search icon needed to be in right side of input box(素材-用户界面搜索图标需要位于输入框的右侧)

转载 作者：bug小助手 更新时间：2023-10-24 17:54:51 26 4

 import InputBase from '@material-ui/core/InputBase';
import SearchIcon from '@material-ui/icons/Search';
  <div className={classes.search}>
            <div className={classes.searchIcon}>
              <SearchIcon />
            </div>
            <InputBase
              placeholder="Search…"
              classes={{
                root: classes.inputRoot,
                input: classes.inputInput,
              }}
              inputProps={{ 'aria-label': 'search' }}
            />
          </div>

<InputBase
  placeholder="Search…"
  inputProps={{ 'aria-label': 'search' }}
  endAdornment={<SearchIcon/>}
/>

import Button from "@mui/material/Button";
import { Container, InputAdornment, TextField } from "@mui/material";
import { useState } from "react";
import SearchIcon from "@mui/icons-material/Search";

const MyFilesIndex = () => {
  const [searchTerm, setSearchTerm] = useState("");

  const handleChange = (event: any) => {
    setSearchTerm(event.target.value);
  };

return (
  <div>
      <Container maxWidth="md">
        <TextField
          id="search"
          type="search"
          placeholder="Search"
          value={searchTerm}
          onChange={handleChange}
          sx={{ width: 350 }}
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <SearchIcon />
              </InputAdornment>
            )
          }}
        />
      </Container>
    </div>
);

26 4 0

• javascript - 将文本从一个 INPUT 拖动到另一个 INPUT，而不从源 INPUT 中删除文本

  我有两个文本输入元素 A 和 B。 我希望用户能够从 A 中选择部分或全部文本并拖动到 B，但文本不会从 A 中消失。 假设“A”包含“quick brown fox”，用户突出显示“fox”一词并将

• JavaScript 无法将 input.min、input.max、input.value 识别为整数

  我正在一个网站上工作，如果在提交表单之前数字不在最小值和最大值之间，我希望数字输入能够自行更正。我的代码如下: HTML: JavaScript: function CorrectOverUnder

• php - Laravel 4:Input::has() + Input::get() vs. ($var = Input::get()) != null

  在检查输入值是否存在并将其分配给变量时，我看到了两种实现此目的的方法: if(Input::has('id')) { $id = Input::get('id'); // do som

• input - <input type ="submit"/> 和 <input type ="text"/> 之间的盒模型不一致

  我意识到 有一个 border-box盒子模型，而有一个 content-box盒子模型。此行为存在于 IE8 和 FF 中。不幸的是，这使我无法将这种样式应用于大小均匀的输入: input, tex

• html - 在 Polymer 中，为什么要使用 `<input is="iron-input">` instead of ` `？

  在 Polymer 文档 ( https://elements.polymer-project.org/elements/iron-input ) 中，我发现: 而在另一个官方文档(https://

• PHP : multiple inputs into other multiple inputs

  我使用 jquery 添加/删除输入 我使用append为日期/收入添加多个Tr 我还使用另一个附加来添加多个 td 以获取同一日期 Tr 中的收入 我添加多个日期输入，并在此表中添加多个收入输入 我

• python input() 在调用 input() 之前采用旧的标准输入

  Python3 的 input() 似乎在两次调用 input() 之间采用旧的 std 输入。有没有办法忽略旧输入，只接受新输入(在 input() 被调用之后)？ import time a =

• jquery - :input and input in Jquery 之间的区别

  在一些教程中，我看到了这些选择器: $(':input'); 或 $('input'); 注意“:”。 有什么不同吗？ 最佳答案 $('input') = 仅包含元素名称，仅选择 HTML 元素。 $

• javascript - $(input).blur() & $(input).focusout

  我有下一个 html 表单: Nombre: El nombre es obligatorio. Solo se pe

• javascript - 为什么 `@input` 装饰器优先于 `inputs:[]`

  有两种方法可以在组件上定义输入: @Component({ inputs: ['displayEntriesCount'], ... }) export class MyTable i

• input: dynamic input is missing dimensions in profile

  input: dynamic input is missing dimensions in profile onnx2trt代码报错： import numpy as np import tensor

• python - 如何在 "two-input input"中允许单个输入？

  所以，我有允许两个输入的代码: a, b = input("Enter a command: ").split() if(a == 'hello'): print("Hi") elif(a =

• python - 如何在 input() 进行时访问 input() 函数

  我有一个与用户交流的程序。我正在使用 input() 从用户那里获取数据，但是，我想告诉用户，例如，如果用户输入脏话，我想打印 You are swearing!立即删除它! 而 用户正在输入。 如您

• Java input = ""与 input = null 不同吗？

  我在运行 J2ME 应用程序时遇到了一些严重的内存问题。 所以我建立了另一个步骤来清除巨大的输入字符串并处理它的数据并清除它。但直到我设置 input = null 而不是 input = "" 才解

• 安卓模拟器 : both soft input and hard keyboard input

  我想在我的 android 虚拟设备中同时启用软输入和硬键盘。我知道如何两者兼得，但不会两者。 同时想要BOTH的原因: 软输入:预览当键盘缩小屏幕时布局如何调整大小 硬键盘:显然是快速输入。 提前致

• javascript - addClass "input-invalid"to input 在我点击输入元素外部之前不会显示

  我有一个邮政编码字段，在 keyup 上我执行了一个 ajax 调用。如果没有可用的邮政编码，那么我想添加类“input-invalid”。但问题是，在我单击输入字段的外部 某处之前，红色边框验证不会

• Angular4 @Input() 与 Component.inputs 数组

  根据我的理解使用 @Input() name: string; 并在组件装饰器中使用输入数组，如下所示 @Component({ ... inputs:

• typescript - 如何将语法 "inputs"属性更改为 "@Input"属性装饰器

  我有一段代码是这样的 @Component({ selector: 'control-messages', inputs: ['controlName: control'],

• input - Angular 2 : What are @input and @output properties

  在@component中， @input 和@output 属性代表什么以及它们的用途是什么？ 什么是指令，为什么我们必须把指令放在下面的结构中？ directives:[CORE_DIRECTIVE

• input - 避免SAS错误消息: "NOTE: Invalid argument to function INPUT"

  有没有一种方法可以测试变量是否会使SAS中的INPUT转换过程失败？或者，是否可以避免生成的“NOTE:无效参数”消息？ data _null_; format test2 date9.; inp