材质 UI 样式未渲染

Posted 2023-02-19

【中文标题】材质 UI 样式未渲染

【英文标题】：Material UI Styles Not Rendering

【发布时间】：2019-06-02 16:45:35

【问题描述】：

我正在尝试使用 Material-UI 和 React 构建一个网站。当尝试通过 Hook API 使用 Material-UI 的样式时，它可以在 codesandbox.io 中在线运行，但在我运行它时无法在本地运行。边框半径属性似乎没有更新，按钮或指令对象中的任何属性也没有更新

import React from 'react';
import  makeStyles  from '@material-ui/styles';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles(
  root: 
    width: "100%"
  ,
  button: 
    marginRight: 10,
    borderRadius: 100,
    fontSize: 20,
  ,
  instructions: 
    marginTop: 2,
    marginBottom: 5
  
);

function getSteps() 
  return ['Select campaign settings', 'Create an ad group', 'Create an ad'];


function getStepContent(step) 
  switch (step) 
    case 0:
      return 'Select campaign settings...';
    case 1:
      return 'What is an ad group anyways?';
    case 2:
      return 'This is the bit I really care about!';
    default:
      return 'Unknown step';
  


function HorizontalLinearStepper() 
  const classes = useStyles();
  const [activeStep, setActiveStep] = React.useState(0);
  const [skipped, setSkipped] = React.useState(new Set());
  const steps = getSteps();

  function isStepOptional(step) 
    return step === 1;
  

  function isStepSkipped(step) 
    return skipped.has(step);
  

  function handleNext() 
    let newSkipped = skipped;
    if (isStepSkipped(activeStep)) 
      newSkipped = new Set(newSkipped.values());
      newSkipped.delete(activeStep);
    

    setActiveStep(prevActiveStep => prevActiveStep + 1);
    setSkipped(newSkipped);
  

  function handleBack() 
    setActiveStep(prevActiveStep => prevActiveStep - 1);
  

  function handleSkip() 
    if (!isStepOptional(activeStep)) 
      // You probably want to guard against something like this,
      // it should never occur unless someone's actively trying to break something.
      throw new Error("You can't skip a step that isn't optional.");
    

    setActiveStep(prevActiveStep => prevActiveStep + 1);
    setSkipped(prevSkipped => 
      const newSkipped = new Set(prevSkipped.values());
      newSkipped.add(activeStep);
      return newSkipped;
    );
  

  function handleReset() 
    setActiveStep(0);
  

  return (
    <div className=classes.root>
      <Stepper activeStep=activeStep>
        steps.map((label, index) => 
          const stepProps = ;
          const labelProps = ;
          if (isStepOptional(index)) 
            labelProps.optional = <Typography variant="caption">Optional</Typography>;
          
          if (isStepSkipped(index)) 
            stepProps.completed = false;
          
          return (
            <Step key=label ...stepProps>
              <StepLabel ...labelProps>label</StepLabel>
            </Step>
          );
        )
      </Stepper>
      <div>
        activeStep === steps.length ? (
          <div>
            <Typography className=classes.instructions>
              All steps completed - you&apos;re finished
            </Typography>
            <Button onClick=handleReset className=classes.button>
              Reset
            </Button>
          </div>
        ) : (
          <div>
            <Typography className=classes.instructions>getStepContent(activeStep)</Typography>
            <div>
              <Button disabled=activeStep === 0 onClick=handleBack className=classes.button>
                Back
              </Button>
              isStepOptional(activeStep) && (
                <Button
                  variant="contained"
                  color="primary"
                  onClick=handleSkip
                  className=classes.button
                >
                  Skip
                </Button>
              )
              <Button
                variant="contained"
                color="primary"
                onClick=handleNext
                className=classes.button
              >
                activeStep === steps.length - 1 ? 'Finish' : 'Next'
              </Button>
            </div>
          </div>
        )
      </div>
    </div>
  );


export default HorizontalLinearStepper;

您可以在此处查看预期结果：https://98m6j7m314.codesandbox.io 应用borderRadius属性后，按钮边框是圆形的

【问题讨论】：

inspect 元素中的样式是被其他东西覆盖还是根本没有渲染？

@Muljayan 它似乎被覆盖了，但我不太确定，它有一个名为 .MuiButton-root-107 的类与之关联，并且该类将边框半径设置为 4px .这在工作版本上是不一样的，尽管它是相同的代码和包版本

你试过不同的浏览器吗？也可以尝试使用 !important 标签。

【参考方案1】：

将@material-ui/styles 与@material-ui/core 一起使用时，您需要按照https://v3.material-ui.com/css-in-js/basics/#migration-for-material-ui-core-users 的安装步骤进行操作。

这是您的代码框链接：https://codesandbox.io/s/material-demo-rv2w1

【讨论】：

你好乔希，非常感谢你，我没有正确执行安装步骤！它现在在导入 bootstrap.js 后可以工作，虽然我已经从 @material-ui/styles 导入了安装，但它低于 React 的导入

@aswiftproduction 你能分享一下如何将 bootstrap.js 导入 index.js 文件吗？

@Oshik，如果您仍然需要制作样式，那么导入样式有什么意义？

Codesandbox 不工作。这就是为什么我们要求始终在答案中添加代码示例以及链接。

@Josh Wooding 我的应用程序不会在此之后编译并出现错误 = 尝试导入错误：“安装”未从“@material-ui/styles”导出。知道为什么会发生这种情况吗？

【参考方案2】：

Web 浏览器使用缓存，在某些情况下您的更改不会重新加载。使用 Ctrl+f5 进行引用，在您的设置中清除或禁用缓存可能会有用。

请尝试使用其他网络浏览器并以隐身模式查看您的本地主机网页

【讨论】：

嘿我的朋友，刚刚尝试了隐身，它仍然没有渲染带有borderRadius的按钮，我试试ctrl-f5