标签: material-ui

有没有办法自定义BottomNavigationBar高度？

我目前有一个BottomNavigationBar带有标签的标签可以点击/滑动导航，但是默认高度（即使在减少文本和图标之后）太高了。

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.blue,
    title: Text( 'RefLog', style: Styles.headerLarge ),
    actions: <Widget>[
      new IconButton(
        icon: Icon(Icons.list),
        onPressed: () {},
      )
    ],
  ),
  body: DefaultTabController(
    length: 3,
    child: Scaffold(
      body: TabBarView(
        children: _children,
      ),
      bottomNavigationBar: TabBar(
        tabs: [
          Tab( text: 'One', icon: Icon(Icons.import_contacts, size: 20.0) ),
          Tab( text: 'Two', icon: Icon(Icons.restaurant, size: 20.0) ),
          Tab( text: 'Three', icon: Icon(Icons.record_voice_over, size: 20.0) ),
        ],
        labelStyle: TextStyle(fontSize: 12.0),
        labelColor: Colors.white, …

我有以下输入字段，我希望它只接受正整数，而不提供插入字符的可能性- + , .。

<TextField
  fullWidth
  type="number"
  placeholder={'[1-100]'}
  id="simple-start-adornmhent"
  onChange={this.handleChangeField('amount')}
  InputProps={{ inputProps: { min: 1 } }}
/>

你能给我一些建议吗？

我有一个使用 Formik 库创建事件的表单。我需要检查开始日期是否与结束日期重叠，反之亦然。我有两个日期选择器可以选择日期和时间。我如何使用 Yup 来验证这一点并在它们重叠时显示错误消息？

我在这里先向您的帮助表示感谢

const validationSchema = Yup.object().shape({
    eventName: Yup.string()
        .min(1, "Must have a character")
        .max(10, "Must be shorter than 255")
        .required("Must enter an event name"),

    email: Yup.string()
        .email("Must be a valid email address")
        .max(255, "Must be shorter than 255")
        .required("Must enter an email"),

    eventStartDate: Yup.date()
        .required("Must enter start date"),


    eventEndDate: Yup.date()
        .required("Must enter end date")


})

var defaultValue = new Date().toDateString


export default function EventForm(){

    return (
        <Formik 
        initialValues={{eventName: "", email: "", }}
        validationSchema={validationSchema}
        onSubmit={(values, {setSubmitting, resetForm}) …

我有一个材料用户界面TextField，它在焦点上打开一个Popper. 我正在尝试使用 react-testing-library 测试这种行为。

组件：

import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import Grow from '@material-ui/core/Grow';
import Paper from '@material-ui/core/Paper';
import Popper from '@material-ui/core/Popper';
import TextField from '@material-ui/core/TextField';
import React from 'react';
import { ItemType } from './types';

export type TextFieldDropDownProps = {
    items: ItemType,
};

export function TextFieldDropDown(props: TextFieldDropDownProps) {
    const [searchTerm, setSearchTerm] = React.useState('');
    const [anchorEl, setAnchorEl] = React.useState(null);

    const handleSearchTermChange = (event: any) => {
        setSearchTerm(event.target.value);
    };

    const onFoucs = (event: any) => {
        setAnchorEl(event.currentTarget); …

我创建一个类型接口来将自定义属性添加到调色板，如下所示：

declare module @material-ui/core/styles/createMuiTheme {
  interface PaletteColor {
    transparent?: string;
    gradient?: PaletteColor;
  }
  interface Palette {
    gradient?: PaletteColor;
    transparent?: PaletteColor;
    secondary?: {
      transparent?: string;
    }
  }

  interface PaletteColorOptions {
    main?:string;
    dark?:string;
    light?:string;
    transparent?: string;
    gradient?: string;
    test?: string
  }
}

我正在尝试很多接口来让它工作......

然后我在我的主题中使用这些类型，如下所示：

export default function createMyTheme(options: ThemeOptions) {
    return createMuiTheme({
      ...options,
    })
  }

我使用该函数通过导入并调用它来创建我的主主​​题：

const theme = createMyTheme({});

然后我像这样设置组件样式：background：theme.palette.gradient.main，

它告诉我：

Property 'gradient' does not exist on type 'Palette'.

环境：“@material-ui/core”：“^4.9.2”，“react”：“^16.12.0”，“typescript”：“^3.7.5”

这是我的完整主题：

const theme = createMyTheme({
  palette: {
    primary: {
      main: '#5FB9A6', …

---------问题已解决 - 问题末尾的解决方案--------

我尝试使用 npm 在 Netflix-Clone React.js 项目中安装Material UI Icons，但出现以下错误 -

PS D:\REACT Projects\netflix> npm i @mui/icons-material @mui/material
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: netflix@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR!   peer react@">=16.8.0" from @emotion/react@11.8.2
npm ERR!   node_modules/@emotion/react
npm ERR!     peerOptional @emotion/react@"^11.5.0" from @mui/material@5.5.3
npm ERR!     node_modules/@mui/material
npm ERR!       @mui/material@"^5.5.3" from the root project
npm …

我想通过使用 MUI 断点使我的项目具有响应能力，但我不知道如何以简单的方式使用它们，我认为创建 const 样式（如他们在文档中解释的那样）对于初学者来说并不是一种简单方便的方法！如果您有任何有关此主题的信息可以与我分享，我将不胜感激。

我已经使用 react 一段时间了，我知道 Material UI https://material-ui.com/是为 react 构建的 UI 库。我的问题是 - 是否可以将这个库（为反应而构建）与 react-native 一起使用？

在一些研究中，我发现 react-native 有另一个名为 react-native-paper 的 UI 库，但我想知道 Material-UI 是否可以与 react-native 结合在一起？

我正在尝试使用自定义Material-UI Autocomplete组件并将其连接到react-hook-form.

TLDR：需要使用带有 react-hook-form 控制器的 MUI 自动完成而不需要 defaultValue

我的自定义Autocomplete组件采用具有结构的对象，{_id:'', name: ''}它显示名称并_id在选择选项时返回。该Autocomplete工作得很好。

<Autocomplete
  options={options}
  getOptionLabel={option => option.name}
  getOptionSelected={(option, value) => option._id === value._id}
  onChange={(event, newValue, reason) => {
    handler(name, reason === 'clear' ? null : newValue._id);
  }}
  renderInput={params => <TextField {...params} {...inputProps} />}
/>

为了使工作与react-hook-form我设置的setValues是处理程序onChange中Autocomplete，然后手动注册该组件在useEffect如下

useEffect(() => {
  register({ name: "country1" });
},[]);

这工作正常，但我想没有useEffect钩子，只是直接以某种方式使用寄存器。

接下来我尝试使用Controller组件 …

我所经历的MUI文档，在Autocomplete组件部分我有两个props，getOptionLabel而getOptionSelected我得到了定义，但我没有正确理解它。因此，如果有人可以通过示例以简单的方式给我正确的定义，那就太好了