时间戳

首页 > 解决方案 > React CSS 类在生产服务器上自动覆盖

javascript - React CSS 类在生产服务器上自动覆盖

问题描述

我在我的 React 项目中遇到了一个奇怪的 CSS 问题。的特定部分JSX <div>应用了一个类，并在项目的主.css文件中添加了一些样式属性。在本地开发中，一切正常，但一旦创建构建并上传到生产服务器，JSX <div>CSS 类的特定部分就会发生变化，并且样式会被扭曲。

例子：

原始 JSX

import React, { useEffect, useState, useContext } from "react";
import Tooltip from "@material-ui/core/Tooltip";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import Slider from "@material-ui/core/Slider";

const useStyles = makeStyles((theme) => ({
  root: {
    width: 450,
  },
  margin: {
    height: 100,
  },
}));

const PrettoSlider = withStyles({
  root: {
    color: "red",
    height: 8,
  },
  thumb: {
    height: 24,
    width: 24,
    backgroundColor: "#fff",
    border: "2px solid currentColor",
    marginTop: -8,
    marginLeft: -12,
    "&:focus,&:hover,&$active": {
      boxShadow: "inherit",
      border: "2px solid #fff407 !important",
    },
  },
  active: {
    backgroundColor: "#fff407",
  },
})(Slider);

const CustomizedSlider = ({
  id,
  abbr,
  type,
  minElig,
  maxElig,
}) => {

  useEffect(() => {
    setValue(sliderPreviousValue);
  }, [sliderPreviousValue]);


  const classes = useStyles();
  return (
    <>
      <div className={classes.root}>
        {type === "intervention" ? (
          <ProgressBar max={maxElig} value={sliderValue} />
        ) : null}

        {renderSlider}
      </div>
    </>
  );
};

原始 DOM：

<div class="diabMetr clearfix">
   <span class="diabLabl">Diabetes</span>
   <div class="makeStyles-root-1">
      <span class="MuiSlider-root WithStyles(ForwardRef(Slider))-root-3 MuiSlider-colorPrimary"><span class="MuiSlider-rail WithStyles(ForwardRef(Slider))-rail-8"></span><span class="MuiSlider-track WithStyles(ForwardRef(Slider))-track-7" style="left: 0%; width: 83.3333%;"></span><input type="hidden" value="200"><span class="MuiSlider-thumb WithStyles(ForwardRef(Slider))-thumb-4 MuiSlider-thumbColorPrimary PrivateValueLabel-open-12 PrivateValueLabel-thumb-11" tabindex="0" role="slider" data-index="0" aria-label="pretto slider" aria-orientation="horizontal" aria-valuemax="240" aria-valuemin="0" aria-valuenow="200" style="left: 83.3333%;"><span class="PrivateValueLabel-offset-13 MuiSlider-valueLabel WithStyles(ForwardRef(Slider))-valueLabel-6"><span class="PrivateValueLabel-circle-14"><span class="PrivateValueLabel-label-15">200</span></span></span></span></span>
      <div class="valueOuter clearfix"><label class="valueLeft">0</label><label class="valueRight">240</label></div>
   </div>
</div>

这个 JSX 的 CSS 是：

.diabMetr {
        padding-top: 10px;
        span.diabLabl {
          display: inline-block;
          width: 200px;
          text-align: left;
          font-size: 12px;
          line-height: 30px;
          text-align: right;
          @include respond-to(media-xl) {
            width: 120px;
          }
        }
        span.MuiSlider-root {
          width: 100%;
          padding: 0;
          height: 0px;

          .MuiSlider-rail {
            height: 30px;
            border-radius: 15px;
            background: #e8e8e8;
            opacity: 1;
          }
          .MuiSlider-track {
            height: 30px;
            background: #88d479;
            border-radius: 15px;
          }
          .MuiSlider-thumb {
            z-index: 12;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            margin-left: -17px;
            border: #88d479 solid 2px;
            margin-top: -3px;
          }
          .MuiSlider-markLabel.MuiSlider-markLabelActive:last-child() {
            right: 0 !important;
          }
        }
      }

.makeStyles-root-1 {
  width: calc(100% - 220px) !important;
  float: right;
  margin-top: -22px;
}

构建后 DOM 发生变化并上传到服务器：

<div class="diabMetr clearfix">
   <span class="diabLabl">Diabetes</span>
   <div class="jss16">
      <span class="MuiSlider-root jss18 MuiSlider-colorPrimary"><span class="MuiSlider-rail jss23"></span><span class="MuiSlider-track jss22" style="left: 0%; width: 83.3333%;"></span><input type="hidden" value="200"><span class="MuiSlider-thumb jss19 MuiSlider-thumbColorPrimary jss27 jss26" tabindex="0" role="slider" data-index="0" aria-label="pretto slider" aria-orientation="horizontal" aria-valuemax="240" aria-valuemin="0" aria-valuenow="200" style="left: 83.3333%;"><span class="jss28 MuiSlider-valueLabel jss21"><span class="jss29"><span class="jss30">200</span></span></span></span></span>
      <div class="valueOuter clearfix"><label class="valueLeft">0</label><label class="valueRight">240</label></div>
   </div>
</div>

该类的 CSS.jss16是：

.jss16 {
    width: 450px;
}

需要注意的问题 只有当构建上传到服务器并且 CSS 相应更改时，该类.makeStyles-root-1被替换为某个随机类.jss16，JSX 的其余部分保持不变。我尝试在代码中的任何地方搜索该类.jss16，但没有找到。此外，在 localhost 上一切正常。

我尝试将 CSS 属性添加到.jss16如下所示：

.jss16 {
  width: 450px;
  width: calc(100% - 220px) !important;
  margin-top: -22px;
  float: right;
}

然后重新启动上传过程，但不是.jss16，而是替换另一个类，例如.jss42. 这会不断重复，并且不适用于创建的任何新版本。

我还尝试了以下 CSS：

.diabMetr + span + div {
  width: 450px;
  width: calc(100% - 220px) !important;
  margin-top: -22px;
  float: right;
},

但这也没有帮助。应用程序的样式仍然失真（不正确，与 localhost 不同）。

我花了几个小时寻找这个但徒劳无功。如果有人可以帮助我理解此错误并解决相同的问题，将不胜感激。提前致谢！

标签： javascripthtmlcssreactjsmaterial-ui

解决方案

这段代码有很多问题。正如@Max在他/她的回答中提到的那样，首先在jsxCSS类中给出。 另一个问题是's不能以这种方式工作。在构建阶段更改为随机名称中的classNames 。这恰好保持 classNames 的唯一性，这是's 的功能。我建议你阅读这个@matrial-ui 的关于. 这里提供了一个代码示例。className
@material-uimakeStylemakeStyle@material-uimakeStyles

要使用 makeStyles 类，您必须将其挂接到您的组件中。

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  root: {
    backgroundColor: 'red',
    color: props => props.color,
  },
});

export default function MyComponent(props) {
  const classes = useStyles(props);
  return (
    <div className={classes.root}>
      Lorem iosum poder
    </div>
  );
}

更新

根据您的jsx代码，添加您.makeStyles-root-1在对象的 css 类中添加的样式useStyles。它将样式添加到元素。
在useStyles此对象中添加这些 CSS 样式后，将如下所示：-


const useStyles = makeStyles((theme) => ({
  root: {
    width: 'calc(100% - 220px) !important',
    float: 'right',
    marginTop: '-22px'

  },
  margin: {
    height: 100,
  },
}));

该类root将包含这些样式，并且将在不提供与CSS文件分开的样式的情况下应用它。

推荐阅读