在生产服务器上，应自动重写CSS类。

Question

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

示例：

原版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>

类.jss16 的CSS是：

.jss16 {
    width: 450px;
}

问题注意到只有类.makeStyles-root-1被替换为一些随机类.jss16，当构建上传到服务器并且CSS相应地发生变化时，JSX的其余部分保持不变。我尝试在代码中的任何地方搜索类.jss16，但是没有找到它。而且，在本地主机上一切都很好。

我尝试将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;
},

但这也没什么用。应用程序的样式仍然是扭曲的(不正确，不像本地主机那样)。

我花了几个小时来寻找这个，但没有结果。如果有人能帮助我理解这个错误并解决同样的问题，我们将不胜感激。提前感谢！

Answer 1

这段代码有很多问题。首先，在jsx中，CSS类被命名为className，正如@Max在他/她的回答中提到的那样。

另一个问题是，@material-ui的makeStyle并不是以这种方式工作的。在构建阶段，makeStyle内部的classNames变成了随机名称。这恰好保持了classNames的统一性，这是@material-ui的特性。我建议你阅读这个@matrial ui的文档关于makeStyles的内容。还有，这里提供了一个代码示例。

要使用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代码，添加在css类.makeStyles-root-1中添加到useStyles对象中的样式。它将把样式添加到元素中。

在useStyles中添加那些CSS样式后，该对象将如下所示：

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

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

root类将包含这些样式，并且它将在不单独提供样式和CSS文件的情况下应用。

Answer 2

解决方案

我不知道是哪个组件创建了带有"jss16“类的div，假设它是ExternalComponent。

您应该添加一个自定义className (假设ExternalComponent正确处理此问题)：

<ExternalComponent className="myclass">
   ...
</ExternalComponent>

这将创建一个像这样的DOM：

<div class="jss16 myclass">
    ...
</div>

您可以为myclass创建css

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

解释

ExternalComponent使用jss动态生成css类，因此不能依赖动态生成类的名称。在大多数情况下，具有自定义类的组件应该将props.className附加到生成的jss中，如下所示：

return (
    <div className={jssClassname + props.className ? ' ' + props.className : ''}>
        {children}
    </div>
);

Answer 3

我无法重现错误，因为我有一些语法问题，所以我想知道是否修复这些错误，构建将正确运行：

• 将关闭/添加到input
• 使用对象编写样式，例如style={{left: '0%', width: '83.3333%'}}
• 将class更新为className
• 将tabindex更新为tabIndex

最后，如果这没有帮助，那么要使CSS工作，即.diabMetr + span + div，将其重写为：

.diabMetr > span + div {}

或

.diabMetr > div {}

现在，它没有选择子元素。