时间戳

首页 > 解决方案 > 如何使用带有 Material UI 输入的样式化组件？

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

问题描述

我对 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;

我想做的事：

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

我如何实现这一目标？

标签： reactjsmaterial-ui

解决方案

更改占位符大小

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

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>
      ) : (
        ""
      )
    }
/>

推荐阅读