小编Oli*_*ari的帖子

如何在没有换行的情况下制作带下划线的文本enter？

   <Typography sx={{ 
          top: '104px',
          fontFamily: 'Roboto',
          fontStyle: 'normal',
          fontWeight: 'normal',
          lineHeight: '24px',
          fontSize: '16px',
          letterSpacing: '0.18px',
          color: '#172B4D',
          margin: '16px 0px'
       }}>
      The big brown fox jumps over the <Typography sx={{textDecoration: 'underline'}}>lazy </Typography> dog
      </Typography>

我无法更改KeyboardTimePicker. 我读了关于KeyboardButtonProps和InputAdornmentProps但我不明白它如何帮助我...

我的键盘时间选择器

当我将 DatePicker 的初始值设置为 null 时，它会阻止键盘输入。如何避免？沙盒示例https://codesandbox.io/embed/silly-black-y0dn7

function KeyboardDatePicker(props) {
  const [selectedDate, handleDateChange] = useState(null);

  return (
    <MuiPickersUtilsProvider utils={MomentUtils}>
      <DatePicker
        keyboard
        clearable
        label="Masked input"
        format="DD.MM.YYYY"
        mask={value =>
          value
            ? [/\d/, /\d/, ".", /\d/, /\d/, ".", /\d/, /\d/, /\d/, /\d/]
            : []
        }
        value={moment(selectedDate)}
        onChange={date => {
          handleDateChange(date);
        }}
        disableOpenOnEnter
        animateYearScrolling={false}
      />
    </MuiPickersUtilsProvider>
  );
}

我正在尝试在 Next.js 中使用 Material-UI 时向我的 theme.js 添加不同的字体。很难弄清楚如何做到这一点。

我已经尝试按照此处的建议（https://github.com/zeit/next.js/issues/512）使用 fontfaceobserver ，但无法更新主题。这是我的 theme.js 文件：

const theme = createMuiTheme({
  typography: {
    fontFamily: [
      'Raleway','Roboto Condensed',
    ].join(','),
    fontWeight: 700,
    h1:{
      fontFamily: 'Raleway',
      fontWeight: 700,
    }
  },
});

我的 h1 的字体没有改变:(

我正在使用material-ui 选择器的3.2.6 版来创建一个在移动设备和桌面上呈现不同的组件。

在桌面上，我显示一个带有文本输入的常规内联日期选择器，而对于移动设备，我只想显示一个打开模态的日期图标按钮

从我所看到的材料选择器 api 没有隐藏文本字段的道具，并且 DatePickerModal 不是一个独立的组件。

我看到了使用 ref 打开按钮的解决方案，但这似乎适用于旧版本的库，我无法让它工作。关于如何使用最新版本实现这一目标的任何提示？是否有一些道具可以传递给 TextField 组件来隐藏它？

我遇到了一些问题，但我没有找到解决方案。\nMUI X DatePicker（带有 Material UI）似乎有一种默认格式，用于将日期显示为

Fri Oct dd yyyy HH:MM:SS GMT+HHMM (name of timezone here)\n

但是，我需要能够传递以下格式的日期

yyyy-MM-ddThh:MM:ss+HH:mm这是(Date)T(Time)+(Timezone)

到组件，然后以相同的格式返回提交。

在某些情况下，此日期时间选择器的值未设置，在某些情况下则已设置。而且我不确定如何获得我需要的格式，因为我无法控制收到的日期格式。

该组件似乎可以解析我提供的数据，并设置正确的值，但新数据（如果值发生变化）确实采用不同的格式。

编辑：上面只是一个简单的例子。

Data I get: 2020-10-11T15:56:28+11:00\n

组件输出的数据：{ "$L": "en", "$u": undefined, "$d": Date Sun Oct 11 2020 15:56:28 GMT+1100 (Australian Eastern Daylight Time), "$x": {}, "$y": 2020, "$M": 9, "$D": 11, "$W": 0, "$H": 15, "$m": 56, \xe2\x80\xa6 }

DateTimePicker的相关代码：

import React from 'react';\nimport TextField from '@mui/material/TextField';\nimport …

我正在使用 React Material UI

我想在后端计算的某些条件下显示错误。

我使用了 Material UI-datepicker 但无法显示错误

import * as React from 'react';
import TextField from '@mui/material/TextField';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import DatePicker from '@mui/lab/DatePicker';

const PickupDatePickerComponent = (props) => {

  const [value, setValue] = React.useState(null);

  const handleChange = (newValue)=>{
    setValue(newValue);
  }

  const todayDate = new Date();

  return (
    <LocalizationProvider style={{ width:"100%"}} dateAdapter={AdapterDateFns}>
      <DatePicker
        label="example"
        value={value}
        onChange={handleChange}
        minDate={todayDate}
        renderInput={(params) => <TextField 
          error
          helperText="Your error message" 
          {...params} sx={{ width:"100%" }} 
        />}
        onError={true}
        error
        helperText="Your error …

我将服务器端渲染(SSR) 工作应用程序迁移到 MUI 版本 5。我遵循了官方程序，但是当我禁用 JavaScript 时，我收到了一个原始 HTML 页面（没有 CSS）。您可以在此处看到它（如果它已关闭，抱歉；我经常重新部署以进行测试）。

\n
1. 运行 codemod（v5.0.0/preset-safe 和 link-underline-hover）
\n
2. 更改了 makeStyles 调用以使用tss-react
\n
3. 根据Next.js 的 MUI 示例修改了我的_app和_document文件
\n

我启动了官方SSR Next.js 实现。它表明它也不起作用。

有关更多详细信息，以下是我的项目中的关键文件：

_app.js

import * as React from \'react\';\nimport Head from \'next/head\';\nimport {ThemeProvider} from \'@mui/material/styles\';\nimport CssBaseline from \'@mui/material/CssBaseline\';\nimport {CacheProvider} from \'@emotion/react\';\nimport theme from \'../components/theme\';\nimport createEmotionCache from "../lib/createEmotionCache";\nimport {StyledEngineProvider} from \'@mui/material/styles\';\nimport {ApolloProvider} from "@apollo/client";\nimport …

是否有可用的 Material-UI 组件的现有 PSD 或 Sketch（首选选​​项）文件？

https://material-ui.com/

我可以在 Material Design Template v2 中使用 Sketch build 来制作模型，但我不确定这是否是产品设计组件的准确表示。这可能会在以后引起问题。

http://www.sketchappsources.com/free-source/1601-material-design-sketch-template-v2.html

我用过MUI Menu一些MenuItem。但我不断收到错误：MUI: The Menu component doesn't accept a Fragment as a child. Consider providing an array instead. 。任何人都可以用简单的文字解释这个错误吗？我在网上看到了很多类似的解释，但我觉得没有一个是清楚的。我看过第一个问答，但没有向我解释太多。我从 MUI 的网页上获取了这个简单的例子。但我仍然收到错误。在类似的情况下如何解决？

我没有任何可以使用的数组。我的每一份MenuItem遗嘱都是定制的。

  const DataMenu = ({ anchor, onClick, onClose }: Props) => (
  <Menu
    id="data-menu"
    anchorEl={anchor}
    open={Boolean(anchor)}
    onClose={onClose}
  >
    <MenuItem onClick={onClick}>
      <ListItemIcon>
        <Db1 />
      </ListItemIcon>
      <Typography>Data 1</Typography>
    </MenuItem>
    <MenuItem onClick={onClose}>
      <ListItemIcon>
        <Db2 />
      </ListItemIcon>
      <Typography>Data 2</Typography>
    </MenuItem>
  </Menu>
);

export default DataMenu;