那些遇到过的问题

标签: material-ui

手动设置MaterialUI Switch组件的大小

我正在尝试更改 Material-UI Switch 的大小，因为默认大小不够大。我已经设法增加了大小，但现在的行为并不理想。
当它处于默认状态时看起来不错：
在此输入图像描述

但是，当我更改其状态时，它会失去样式：
在此输入图像描述

我不知道如何更改样式，因此拇指一直到轨道的右侧。

 <Switch
   onChange={setPrivateSwap}
   classes={{
     root: classes.root,
     switchBase: classes.switchBase,
     checked: classes.checked,
     track: classes.track,
     thumb: classes.thumb,
   }}
 />

const useStyles = makeStyles({
  root: {
    width: '90px',
    height: '50px',
    padding: 0,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  track: {
    width: '40px',
    height: '20px',
    borderRadius: '10px',
  },
  switchBase: {
    '&$checked': {
      color: '#007D81',
    },
    '&$checked + $track': {
      backgroundColor: 'rgba(0,125,129,0.3)',
    },
  },
  checked: {},
  thumb: {
    width: '32px',
    height: '32px',
  },
});
Run Code Online (Sandbox Code Playgroud)

html css reactjs material-ui

Tri*_*tan
lucky-day
1
推荐指数
1
解决办法
2112
查看次数

如何设置material-ui表格单元格的固定宽度以截断内容

我显示了无限滚动的用户设置表。第一列包含长度不同的用户名。当向下滚动更多用户时，这使得表的大小随着列表的扩展而跳跃。所以我想在该列上设置固定宽度并相应地截断名称列。

我尝试这样做，但它不起作用。表格单元格会根据其他单元格进行调整并分配页面宽度。

<Table>
    <TableBody>
        <TableRow>
            <TableCell style={{ width: '20%' }}>
                <Typography noWrap>SomeveeeeeeeeeeeeeryLoooooooooongNaaaaaame</Typography>
            </TableCell>
        </TableRow>
    </TableBody>
</Table>
Run Code Online (Sandbox Code Playgroud)

我该如何实现这一目标？

material-ui

ole*_*ank
lucky-day
1
推荐指数
1
解决办法
4389
查看次数

React Material UI 选项卡关闭

我正在实现具有关闭功能的材料用户界面选项卡。在关闭选项卡上无法设置当前选项卡中的活动选项卡值。它给出警告错误。

代码在codesandbox中

reactjs material-ui

作者
2020 08-05
1
推荐指数
1
解决办法
4455
查看次数

自动完成 Material UI Lab 中的 filterSelectedOptions 无法与 onChnage 配合使用

当我使用自动完成来获取所选日期时，所选选项不会被过滤。因此我能够选择相同数据的多个实例。虽然当我删除 OnChange 道具时它会给出结果，但现在我无法更新状态。

<Autocomplete
  multiple
  name="ClassSchedule"
  onChange={(event, value) => setDays(value)}
  ChipProps={{
    style: {
      backgroundColor: "#2EC5B6",
      borderRadius: "5px",
      color: "#fff",
      fontFamily: "Source Sans Pro",
    },
  }}
  id="tags-standard"
  options={[
    { title: "sunday" },
    { title: "monday" },
    { title: "tuesday" },
    { title: "wednesday" },
    { title: "thursday" },
    { title: "friday" },
    { title: "saturday" },
  ]}
  getOptionLabel={(option) => option.title}
  renderInput={(params) => (
    <CssTextField
      {...params}
      style={{
        borderRadius: "10px",
        backgroundColor: "#F5FCFB",
        fontFamily: "Source Sans Pro",
      }}
      variant="outlined"
      id="custom-css-outlined-input"
    />
  )}
/>
Run Code Online (Sandbox Code Playgroud)

javascript reactjs material-design material-ui

Him*_*ain
2020 08-06
1
推荐指数
1
解决办法
5242
查看次数

如何在本地React项目中引用Material UI组件

我正在尝试设置一个简单的 Flask 应用程序，它使用 React 和 Material UI（我不能为此使用 Node/NPM）。React、react-dom 和 Material-ui.js 都由 Flask 从静态资源路径中提供服务。它们加载得很好，但在第一个 text/babel 函数中找不到 Button 元素。它位于material-ui.js 中，但我的JSX 函数看不到它。有没有办法从material-ui.js导入组件？

我的index.html：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <!-- Metas -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />

    <title>F.L.O.P.</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Fonts --> …
Run Code Online (Sandbox Code Playgroud)

reactjs babeljs material-ui

use*_*399
2020 09-23
1
推荐指数
1
解决办法
1044
查看次数

失败的道具类型：不支持道具“children”。请删除它

我在项目中第一次使用 Material UI 选项卡，一切正常，但运行项目时控制台中出现一个错误，这是 我在控制台中得到的内容 ，这是我使用 选项卡的代码示例请帮我？谢谢

tabs children reactjs material-ui

作者
lucky-day
1
推荐指数
1
解决办法
3938
查看次数

如何分别为左右按钮添加样式到材质ui选项卡滚动按钮

文档显示选项卡滚动按钮的默认类是MuiTabScrollButton-root。我希望添加::before到左侧按钮和::after右侧按钮。

选项卡的代码非常标准，因此我添加了一个代码沙箱 https://codesandbox.io/s/confident-forest-x62tv?file=/src/App.js

如何最好在组件CSS（使用classes.something）而不是全局CSS中执行此操作。

material-ui

Kal*_*Kal
lucky-day
1
推荐指数
1
解决办法
2205
查看次数

如何更改 Material UI 日期选择器的填充？

这是codesandbox链接

function InlineDatePickerDemo(props) {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <Fragment>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
          style={{ padding: "20px" }}
          autoOk
          variant="inline"
          inputVariant="outlined"
          label="With keyboard"
          format="MM/dd/yyyy"
          value={selectedDate}
          InputAdornmentProps={{ position: "start" }}
          onChange={(date) => handleDateChange(date)}
        />
      </MuiPickersUtilsProvider>
    </Fragment>
  );
}
Run Code Online (Sandbox Code Playgroud)

我想减少日期选择器框中的间隙，但提供自定义样式不会产生影响。

我很想知道为什么样式不起作用以及解决此问题的方法是什么。

css datepicker reactjs material-ui

Dev*_*AKS
2023 06-02
1
推荐指数
1
解决办法
8807
查看次数

React -- Material UI -- Popover，popover 的 setAnchorEl(null) onClose 由于某种原因没有将其设置为 null

我在 MenuItem（也从 MaterialUI 导入）内有一个 Popover（从 MaterialUI 导入）。我将弹出框的 open 属性设置为anchorEl 的布尔值。onClose 是处理anchorEl 的，如果我在弹出窗口之外单击，它应该将anchorEl 设置为null。然而，情况并非如此。一旦给了 DOMelement 的值，an​​chorEl 就永远不会被设置为 null，而且我不确定我在这里做错了什么。

这是我的代码中对于这个问题很重要的部分

    //state for the anchorEl (also handles the open/close for the popover)
    const [usernamePopoverAnchorEl, setUsernamePopoverAnchorEl] = React.useState<null | HTMLElement>(null);
    
    //handle popover open/close
    const handleUsernamePopoverClick = (e: any) => {
        setUsernamePopoverAnchorEl(e.currentTarget);
    }

    const usernamePopoverOpen = Boolean(usernamePopoverAnchorEl);

    const popoverHandleClose = () => {
        setUsernamePopoverAnchorEl(null);
        console.log(usernamePopoverAnchorEl);
    }
    
    //menuItems with the popovers that don't close
    <MenuItem onClick={handleUsernamePopoverClick}>
        <span>
            <p>Change username</p>
        </span>
        <Popover open={usernamePopoverOpen} anchorEl={usernamePopoverAnchorEl} onClose={popoverHandleClose}>
            <p>Testing helloooo!</p> …
Run Code Online (Sandbox Code Playgroud)

popover typescript reactjs material-ui

nKc*_*nKc
lucky-day
1
推荐指数
1
解决办法
4065
查看次数

Material-UI TextField onChange 不会在测试中调用函数

我正在学习 Jest 和 React，并尝试使用 Material-UI。我编写这个简单的测试只是为了检查事情如何工作：

import React from 'react';
import { render, fireEvent, configure} from '@testing-library/react';

import { TextField } from '@material-ui/core';

configure({ testIdAddribute: 'id' });

describe('Testing events', () => {

  test('onChange', () => {
    const onChangeMock = jest.fn();
    
    const { getByTestId } = render(
      <TextField id="test" onChange={onChangeMock} type="text" />
    );
    
    fireEvent.change(getByTestId('test', { target: { value: 'foo' } }));
    expect(onChangeMock.mock.calls.length).toBe(1);
  });
});
Run Code Online (Sandbox Code Playgroud)

但这个测试失败了：

expect(received).toBe(expected) // Object.is equality

    Expected: 1
    Received: 0
Run Code Online (Sandbox Code Playgroud)

我在这里不明白什么？

reactjs jestjs material-ui react-testing-library

use*_*009
2020 10-29
1
推荐指数
1
解决办法
3511
查看次数

标签 统计

material-ui ×10

reactjs ×8

css ×2

babeljs ×1

children ×1

datepicker ×1

html ×1

javascript ×1

jestjs ×1

material-design ×1

popover ×1

react-testing-library ×1

tabs ×1

typescript ×1