如何使用带有 Material UI 输入的样式化组件？答案

【问题标题】：How to use styled components with Material UI input?如何使用带有 Material UI 输入的样式化组件？
【发布时间】：2021-10-05 22:02:54
【问题描述】：

我对 Material UI 输入有一点小问题，我想使用样式化的组件来更改它的设计，但我遇到了一个问题。这是我的代码：

import React from "react";
import styled from "styled-components";
import Input from "@mui/material/Input";
import InputAdornment from "@mui/material/InputAdornment";
import { BiSearch } from "react-icons/bi";

const InputContainer = styled(Input)`
    width: 350px;
    height: 42px;
    border-radius: 2px;
    border: 1px solid #c0c0c0;
`;

const SearchIcon = styled(BiSearch)`
  color: #c0c0c0;
  margin-left: 14px;
`;

const InputComponent = ({ placeholder, type }) => {
  return (
    <div>
      <InputContainer
        placeholder={placeholder}
        startAdornment={
          type === "Search" ? (
            <InputAdornment position="start">
              <SearchIcon size="20" />
            </InputAdornment>
          ) : (
            ""
          )
        }
      />
    </div>
  );
};

export default InputComponent;

我想做什么：

更改占位符大小
当用户悬停或点击输入时，没有像现在这样的底部边框，基本上我想删除底部边框

我如何做到这一点？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

更改占位符大小

为此，您可以定位输入元素并更改字体大小。例如

const InputContainer = styled(Input)`
  width: 350px;
  height: 42px;
  border-radius: 2px;
  border: 1px solid #c0c0c0;

  input::placeholder {
    font-size: 20px;
  }
`;

当用户悬停或点击输入时，没有底部边框现在有了，基本上我要去掉底部边框

为此，您可以使用disableUnderline prop。例如，更新后的代码将是

<InputContainer
    placeholder={placeholder}
    disableUnderline
    startAdornment={
      type === "Search" ? (
        <InputAdornment position="start">
          <SearchIcon size="20" />
        </InputAdornment>
      ) : (
        ""
      )
    }
/>

【讨论】：