如何使用样式组件自定义 Material-UI Text Field 的边框颜色、宽度和高度

编程问答 2022-05-30

问题描述

我对如何自定义 Material-UI 组件有点困惑。我已经阅读了文档，一名团队成员说他们使用样式组件。 我正在努力改变

  • 文本字段组件到#cbb0b0 的边框颜色
  • 宽度为 200 像素
  • 高度为 60 像素。

我已经尝试了几个小时的各种事情，但仍然没有弄清楚。我认输求救！

这是我要修改的内容：

import styled from 'styled-components';
import TextField from '@material-ui/core/TextField'; 

export default function InputBox () {
  return (
    <TextField 
      id="outlined-basic"
      variant="outlined"
      label="Default"
      defaultValue="Input Text"
    />
  )
}

解决方法

IIUC styled-components 不是您的要求。 MUI 有多种内置方式来覆盖样式，您可以了解更多信息here。或者，您可以查看每个组件的许多代码示例，其中几乎总是包含样式覆盖（点击显示完整源代码图标）。在这种情况下，Text Fields。

为了在下面的示例中更加明显，我更改了样式值，您只需输入自己的值即可。

const { TextField,makeStyles } = MaterialUI

const useStyles = makeStyles({
  input: {
    width: 400,height: 150,'& input + fieldset': {
      borderColor: 'hotpink',},});

function InputBox() {
  const classes = useStyles();

  return (
    <TextField
      InputProps={{
        className: classes.input,}}
      id="outlined-basic"
      variant="outlined"
      label="Default"
      defaultValue="Input Text"
    />
  );
}

ReactDOM.render(<InputBox />,document.getElementById('root'))
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<div id="root"></div>

componentscomponentsmaterial-uireactjsreactjsreactjsreactjsstyled-componentstextfieldtextfieldtextfield