标签: material-ui

我有以下范围滑块，它显示从 1000 到 1,000,000 的值。

我想显示标签是一种更具可读性的格式，例如100k 1M 1k等。是否可以在工具提示内设置标签格式，以便对用户更有意义，并且不会破坏 UX。

我想用这个函数来改变数字的显示方式。

function numFormatter(num) {
    if(num > 999 && num < 1000000){
        return (num/1000).toFixed(0) + 'K'; // convert to K for number from > 1000 < 1 million 
    }else if(num > 1000000){
        return (num/1000000).toFixed(0) + 'M'; // convert to M for number from > 1 million 
    }else if(num < 900){
        return num; // if value < 1000, nothing to do
    }
}

我在网络开发方面很新。话虽如此，我正在尝试使用 Material-UI 更改框颜色，但它不起作用。（颜色=成功。主要）

目前，我得到的颜色是主要的蓝色。我试图改变每个盒子组件，但它并没有真正适用于其中任何一个。

import React from "react";
import { palette } from '@material-ui/system';
import {
    AppBar,
    Toolbar, 
    Box,
    Link,
    Hidden
} from '@material-ui/core';

import { makeStyles } from '@material-ui/core/styles';
import './Navbar.css';

const useStyles = makeStyles({
    links: {
      padding: '0 50px',
      color: 'white',
      "&:hover": {
        textDecorationColor: "green",
        cursor:'pointer'
      }
    },

  });
export default function Navbar() {
const Navbar = useStyles();
    return(
        <Box component='nav' color="success.main">
            <AppBar>
                <Toolbar>
                    VK Design 
                    <Box m='auto'>
                        <Hidden only='xs'>
                            <typography><Link className={Navbar.links} underline='hover'>HOME</Link></typography>
                            <typography><Link className={Navbar.links} underline='hover'>PORTFOLIO</Link></typography>
                            <typography><Link className={Navbar.links} …

我正在使用Tabs,Tab和TabPanel来自 Material-UI ，如https://material-ui.com/components/tabs/ 中所述。我将它与 Next.js 结合使用。

这是我到目前为止的代码（我删除了 GraphQL/Apollo 调用、Next 路由和内容以简化一点）：https ://codesandbox.io/s/material-demo-6mq4g?file=/demo .js

在 Codesandbox 上，它可以正确呈现。但是，在本地，在 Chrome 中，我有以下内容：

这是检查员：

如果我点击 Alice，然后再次点击 Bob，现在一切看起来都很干净：

并且检查器看起来正确（填充相应地应用于<Box p={3}>）：

我不明白为什么在第一次加载时不应用该样式。

有什么建议吗？

谢谢！

本杰明

我已经阅读了文档，可以选择制作variant="outlined"或制作raised

但是有没有办法让汽车完全没有可见的边框？

我正在尝试使用一些顶部边距来实现 Material UI 抽屉，而不是从页面的最顶部开始，但它没有发生，我尝试应用marginTop但它没有发生。这是 codeSandBox 链接Drawer。

如何申请上边距？

I am trying to develop a sidebar menu using material ui. I am able to make it for simple list. In my project I have a requirement of nested sidebar menu which I am not able to achieve. If I am trying to use recursive function it is providing only main title menu and not rendering child elements. Please help me develop it.

The code for nested sidebar menu is as below,

import React, {useState} from 'react';
import { makeStyles …

我正在使用Material ui 的选项卡，并且能够对选项卡的指示器进行更改。但是，我正在尝试使用样式将指示器的宽度减小到每个选项卡的固定宽度。但似乎指标的位置靠左并带有一些计算值，并且给它一个宽度不会使指标居中对齐。找不到合适的解决方案，请帮助我。这是可编辑的CodeSandbox。

找到以下片段：

1. 默认全角标签。指标占据基本按钮的全宽：

2. 指示器的宽度固定，但未与选项卡标签下方的中心对齐。

我试图通过将其锚定到 来使用 Material UI 抽屉，它可以top正常工作，但唯一的问题是我无法更改抽屉的宽度，它占用了页面的整个宽度。我尝试更新 css 中的宽度，例如

 list: {
    width: 250.   //tried to update it to 100, but its not taking
  },

代码沙盒 如何更新宽度？

我想更改 Material Ui Autocomplet 的占位符字体大小。有什么办法吗？

             <Autocomplete
                  multiple
                  id="tags-outlined"
                  options={top100Films}
                  getOptionLabel={(option) => option.title}
                  defaultValue={[top100Films[13]]}
                  filterSelectedOptions
                  size="small"

                  renderInput={(params) => (
                    <TextField
                      {...params}
                     
                      variant="outlined"

                      placeholder="Enter Transshipment Ports"

                      
                    />
                  )}
                />

React、Material UI、TypeScript
我想将 React 组件放入DataGrid单元格中。我在这里阅读了有关单元格自定义类型的信息，但它对我没有帮助：它仅允许按字符串格式进行管理，但我需要使用组件而不是字符串。例如我想在单元格中使用Link组件。我的代码：

{ field: 'name', headerName: 'Name', width: 200,
    valueGetter: (params: ValueGetterParams): JSX.Element =>
        (<Link href={this.props.createRecordUrl(params.row.logicalName as EntityNames,
            params.row.id as ID)} target="_blank">{params.row.name}</Link>)
},

但是我得到的是[object Object]字符串而不是Link单元格中的组件。我该如何解决问题？