标签: material-ui

我将 Material UI Icons 中的两个图标排成一行。高度本身相同：24px。但路径的高度不同。一个是 18px，另一个是 22px。他们看起来不酷。

如何调整高度？我的意思是“用户看到的高度”。

import {
  Delete,
  FileCopy
} from "@material-ui/icons";

...

<Box display="flex">
  <FileCopy onClick={handleCopy} />
  <Delete onClick={handleDelete} />
</Box>

我尝试设置 SVG 的高度，它使垂直对齐变得丑陋......

我有一个自定义材料 ui 主题，我尝试在本示例 h5 中的版式中添加断点，以便当屏幕低于定义的最大宽度时字体大小较小。媒体查询甚至没有显示在检查器中。由于某种原因它没有被应用。这是代码的相关部分。

const breakpoints = {
  values: {
    xs: 0,
      sm: 0, // Phone
      md: 768, // Tablet/Laptop
      lg: 1500, // Desktop
      xl: 2000
  }
}

function myTheme (theme) {
  const mergedTheme = createMuiTheme({
    ...theme,
    breakpoints: breakpoints, 

    typography: {
      ...theme.typography,
      fontFamily: openSans,
      fontSize: 15,
      h5: {
        fontFamily: openSans,
        fontSize: '1.5625rem', // 25px
        [`& @media screen (max-width: ${breakpoints.values.lg}px)`]: {
          fontSize: '0.06785', //11px
        }
      } 
    }
  // I have also tried just returning 
  // the mergedTheme and not used …

https://material-ui.com/api/slider/

我尝试将禁用标志设置为整个滑块，但拇指在单击时仍然会有光环效果。

如何使用 Material UI 通过 ReactJS 获得粘性页脚。我尝试过这个，但没有坚持到底部。

export default function Footer() {
    return (
        <footer style={{color: "gray"}}>
            <center>Copyright ...</center>
        </footer>
    )
}

看起来MaterialUI 中没有原生支持。如果解决方案不使用 boostrap 会很好。

使用纯 HTML、CSS、Reactjs

我想让占位符在您单击文本字段时向上移动到边框

Material UI 文本字段示例： https: //material-ui.com/components/text-fields/

我正在用来react-hook-form构建我的表单，它是一个很棒的工具。但是，我似乎无法<Switch />根据 redux 的返回值让元素滑动（假/真）。当我单击表单上的“重置”时，我的所有输入都会重置。我的 Switch 控件不会重置，它们仍然停留在最后一个值，无论它是否可能被重置。关于如何解决这个问题有什么想法吗？

我的开关

<FormControlLabel
  control={
    <Switch
      size="medium"
      name="familyFriendly"
      defaultChecked={formState.content.isFamilySafe}
      {...register('content.isFamilySafe')}
    />
  }
  label="Family Friendly"
/>

复位按钮

   <button
        type="button"
        onClick={() => {
          reset(formState, {
            keepErrors: true,
            keepDirty: true,
            keepIsSubmitted: false,
            keepTouched: false,
            keepIsValid: false,
            keepSubmitCount: false,
          });
        }}
      >
        reset
      </button>

使用表单钩子

  const formState = useSelector(selectDynamicForm);
  const {
    register,
    control,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<IFormInput>({});

我试图在我的 React UI 应用程序中设置一个错误属性，这样当文本框超过最大字符数时，就会设置错误属性，并且文本框以红色突出显示。我的逻辑基于https://mui.com/components/text-fields/#validation

然而，只有当用户在文本框之外单击时才会呈现红色；它保持为默认颜色，直到该事件发生。

您能否告诉我是否可以在文本框周围渲染红色错误颜色，而无需在文本框外部单击，即当用户位于文本框内时。

文本域：-

<TextField
  fullWidth
  rowsMax={1}
  autoFocus="autofocus"
  className={classes.textField}
  id={modalConfig.textField.id}
  helperText={textInputErrorMessage}
  label={modalConfig.textField.label}
  placeholder={modalConfig.textField.placeholder}
  variant="outlined"
  value={textName}
  onChange={handleTextChange}
  error={textInputError}
/>

和我的职能：-

function handleTextChange(e) {
    setTextName(e.target.value);
    const checkedMaxTextLength = checkMaxTextLength(e.target.value);
    const checkedZeroTextLength = e.target.value.length === 0;
    setSaveDisabled(checkedMaxTextLength || checkedZeroTextLength);
    setTextInputError(checkedMaxTextLength);
    if (checkedMaxTextLength) {
      setTextInputErrorMessage("The input has exceeded the maximum number of characters");
    } else {
      setTextInputErrorMessage(null);
    }
  }

Module not found: Can't resolve '@emotion/react' in '...\node_modules\@mui\styled-engine'

我在 ReactJS 项目中使用 Material-UI 时遇到编译失败的问题，我检查了 @muinode_modules文件夹，但无法修复编译错误。大家有什么想法请与我分享。

我越来越

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Palette'.
  No index signature with a parameter of type 'string' was found on type 'Palette'.ts(7053)

尝试使用字符串列表从ThemeProviderMaterial-UI获取主题时

样本是 astring[]并且包含看起来像"primary.light"or的字符串"secondary.dark"

useTheme使用这个文件：

import { createTheme, responsiveFontSizes } from '@mui/material/styles';
    import { deepPurple, amber } from '@mui/material/colors';
    
    // Create a theme instance.
    let theme = createTheme({
      palette: {
        primary: deepPurple,
        secondary: amber,
      },
    });
    
    theme = responsiveFontSizes(theme);
    
    export …

我正在尝试从材质 UI [此处][1] 覆盖底部导航图标的颜色。这是我的CSS代码：

.MuiButtonBase-root{
    color: #007A78;
}

.MuiBottomNavigationAction-root{
    color: #007A78;
}

.Mui-selected{
    color: #007A78;
}

我正在尝试将默认的蓝色更改为我的颜色（绿色）。但是，我只注意到文本颜色发生变化，图标没有变化： [![在此处输入图像描述][2]][2] 我使用元素来查看 css，显然图标的颜色没有改变。它仍然是同样的蓝色。[![在此处输入图像描述][3]][3]

有谁知道如何覆盖这个？[1]： https: //mui.com/api/bottom-navigation-action/ [2]：https: //i.stack.imgur.com/cG9DW.png [3]：https://i.stack .imgur.com/joxTL.png