标签: material-ui

我试图使用 nth-child 使两个段落具有不同的背景颜色。对于 JSX 我有

<div className={classes.paragraphs}>
    <p>Test 1</p>
    <p>Test 2</p>
</div>

对于我的CSS

const useStyles = makeStyles(() => ({

  paragraphs: {
    backgroundColor: "blue",
    "&:nth-child(1)": {
       backgroundColor: "green"
    }
  }
}));

使用此 CSS，两个段落都有蓝色背景，但第一个段落应该有绿色背景。

我正在尝试删除 Material UI 文本字段中的自上而下的箭头。

这是代码：

const theme = createMuiTheme({
MuiInput: {
  root: {
    "&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
      "-webkit-appearance": "none",
      margin: 0
    }
  }
}
})

我哪里出错了？

我正在使用DividerReact 组件，但它没有显示。我尝试阅读 API 文档，但无法理解它的用法和演示。如何解决这个问题？

这是它的显示方式

成分：

import './styles.css';
import Products from '../../../Assets/Products.png';
import Divider  from '../../../../node_modules/@material-ui/core/Divider';

const ProductsSection = () => {
    return (
        <div className="ProductContainer">
            <p>INSTALLED OVER 10 LAKHS STAR RATED PUMPSETS ACROSS THE COUNTRY RESULTING IN A CUMULATIVE SAVING OF MORE THAN 9,000 MILLION UNITS OF POWER FOR THE NATION.</p>
            <img id="ProductImage" src={Products} alt="Products" />
            <p>Valves - Pumps - Pipes - IoT Drives & Controllers - Wires & Cables - Solar Systems - Motors </p>
            <Divider …

我有一个 ReactJs 应用程序，它使用具有多个值和复选框的 Material-UI 自动完成组件，完全像它们的代码片段一样：

<Autocomplete
      multiple
      id="checkboxes-tags-demo"
      options={top100Films}
      disableCloseOnSelect
      getOptionLabel={(option) => option.title}
      renderOption={(option, { selected }) => (
        <React.Fragment>
          <Checkbox
            icon={icon}
            checkedIcon={checkedIcon}
            style={{ marginRight: 8 }}
            checked={selected}
          />
          {option.title}
        </React.Fragment>
      )}
      style={{ width: 500 }}
      renderInput={(params) => (
        <TextField {...params} variant="outlined" label="Checkboxes" placeholder="Favorites" />
      )}
    />

检查值后，该值将在带有“X”按钮的芯片中呈现，如下所示：

如何更改，props以便呈现的值将显示为“ Value A, Value B, "Value C”，它们之间有逗号，并且没有其他样式？

感谢您的时间

我正在尝试在 TableRow 上获得圆角边框。我添加了样式“borderRadius：5”，但它没有做任何事情。当我用 borderRadius 将 TableRow 包围起来时，它确实有效，但表格间距被破坏了。

我已经搞乱了一段时间但无法弄清楚..对此最好的解决方案是什么？

<Table>
<TableRow style={{ borderRadius: 5, backgroundColor: "green" }}>
    <TableCell>
        First table cell
    </TableCell>
    <TableCell>
        Second table cell
    </TableCell>
    <TableCell>
        Third table cell
    </TableCell>
</TableRow>
</Table>

我试图从材质 UI 创建数据表，但它仅在“DT_RowId”字段上给我以下错误，尽管 id 是唯一的。如果我只添加“id”，那么它就可以正常工作。有人可以帮我吗？

https://codesandbox.io/s/strange-sanderson-wn3km?file=/demo.js

所以我有以下问题：我在 React JS 中制作了一个 Material-UI DataGrid，我想在 Material-UI DialogContent 中使用它。当放入对话框中时，表中的所有内容都可以正常工作 - 排序、renderCells、checkboxSelection 等，但使用默认过滤除外。这是一个重现该错误的简单示例：https://codesandbox.io/s/relaxed-stallman-sev7x ?file=/src/demo.js

单击列名称/选项，然后单击“过滤器”会出现错误，即您无法在过滤器字段中键入内容。有谁知道这个问题的解决方案吗？

提前致谢，如果问题措辞错误或重复，请先在此处发布，抱歉

您可以在这里找到该库： https: //www.react-spring.io/

    import React from "react";
    import ReactDOM from "react-dom";
    import Typography from "@material-ui/core/Typography";
    import { useSpring, animated } from "react-spring";
    
    function App() {
      const props = useSpring({
        opacity: 1,
        from: { opacity: 0 }
      });
      return (
        <div className="App">
          <Typography variant="h2">
            <animated.div style={props}>Example</animated.div>
          </Typography>
    
          {/* UNCOMMENT THE LINE BELOW AND SEE */}
       {/* <animated.Typography variant="h2">Example</animated.Typography> */}
        </div>
      );
    }
    
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

**I would love if I could do something like:**

 `<animated.Typography style={`props`}>Example </animated.Typography>` …

我有反应功能组件MainToolBar。在导航到其他页面（功能组件）时，我需要更改 MainToolBar 的标题。我怎么能这么做呢？使用 Context API 或 Redux 或任何其他简单的东西

以下是 MainToolBar.Js 的代码

 export default function MainToolBar() {
 const classes = useStyles();
      return (
        <div className={classes.root}>
          <AppBar position="static">
             <Toolbar>
               <Typography align="center" variant="h6" className ={classes.title}>
                ERP System
               </Typography>
               <Button color="inherit">Login</Button>
             </Toolbar>
          </AppBar>
        </div>
      );
    }

以下是 Thirdparty.js 的代码

function ThirdParty() {
  return (
    <div>
      <label>ThirdParty</label>            
    </div>
 )
}

export default ThirdParty;

 ****layout.js****

import {
  BrowserRouter as ReactRouter,
  Switch as ReactSwitch,
  Route as ReactRoute,
} from "react-router-dom";

import ThirdParty from "./ThirdParty.js";
    
export default function …

我正在使用 MaterialUI 组件编写一个应用程序，到目前为止已经有很多东西了。然后我发现了这个很棒的登陆页面/欢迎页面Landy，它使用 Antd，不过，对我来说使用它是最简单的。

在一个项目中使用两种不同的设计工具有什么问题吗？它会让网站变得沉重吗？我可以以某种方式优化它还是应该慢慢迁移到其中之一？