css - 带有 babel 的“带样式”的 Material UI，样式已损坏

问题描述

我们使用 babel 和 lerna 将我们的 react web 应用程序的某些元素分开。到目前为止，它运行得非常好，但在我们创建静态构建时似乎存在样式问题。

我们的核心项目没有通过 babel 运行，也没有任何对 babel 的引用。

我们分离的组件具有以下 babel 依赖项：

"devDependencies": {
    "@babel/cli": "^7.2.0",
    "@babel/core": "^7.2.0",
    "@babel/plugin-proposal-class-properties": "^7.2.1",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.2.0",
    "@babel/preset-react": "^7.0.0"
  },
  "dependencies": {
    "@babel/runtime": "^7.2.0",
    ...
  }

我们使用以下配置文件：

module.exports = {
    plugins: [
        ['@babel/plugin-proposal-class-properties', { loose: true }],
        '@babel/plugin-transform-runtime'
    ],
    presets: [
        '@babel/preset-env',
        '@babel/preset-react'
    ]
};

然后我们运行这个命令./node_modules/.bin/babel ./src/ -d ./dist/ --copy-files来创建我们的“babelised”包，我们使用lerna.

我们对大多数组件使用 material-ui，并使用withStyles(style)(Component)语法将内联 CSS 附加到我们的组件。

如果我npm start在核心项目上运行，一切正常，但正如预期的那样，当我们使用并启动它创建构建时npm run-script build，“babelised”组件中的所有样式都被破坏了。

有没有人经历过这个/知道为什么会这样？

更新：

根据要求，这是我们在 react 应用程序中使用的样式示例：

const styles = theme => ({
  spinner: {
    margin: theme.spacing.unit * 2,
    "margin-left": "calc(50% - 25px)"
  },
  topDiv: {
    display: "flex",
    "align-items": "center",
    width: "100%",
    "padding-bottom": "10px",
    "font-size": "40px",
    color: "white",
    "font-family": "Univia Pro, sans-serif",
    "font-weight": "350",
    "text-shadow": "0.02em 0.02em rgb(91, 91, 91, 0.75)",
    "border-style": "none none solid none",
    "border-width": "2px",
    "margin-bottom": "30px"
  },
  dataImport: {
    margin: "0px 10px 0px 10px"
  },

  paper: {
    width: "25%",
    "max-height": "100%",
    backgroundColor: "rgba(255, 255, 255, 0.95)",
    padding: "20px",
    "font-size": "13px",
    "overflow-y": "scroll"
  },
  instructionsDiv: {
    "border-style": "none none solid none",
    "border-width": "2px",
    "border-color": "rgba(0, 0, 0, 0.4)"
  },
  informationDiv: {
    "border-style": "none none solid none",
    "border-width": "2px",
    "border-color": "rgba(0, 0, 0, 0.4)"
  },
  buttonsDiv: {
    display: "flex",
    "flex-direction": "column",
    "justify-content": "center",
    "align-items": "center"
  },
  pluginStoreButton: {
    color: "white",
    "background-color": "#CFD134",
    margin: "15px 0px 15px 0px",
    width: "255px",
    "&:hover": {
      "background-color": "#b6b742"
    }
  },
  integrationStoreButton: {
    color: "white",
    "background-color": "#2699FB",
    "margin-bottom": "10px",
    width: "255px",
    "&:hover": {
      "background-color": "#2f7cbf"
    }
  },
  emailTeamButton: {
    "margin-top": "10px",
    "background-color": "#EDF3F0",
    "&:hover": {
      "background-color": "#c9d3ce"
    },
    color: "#186A3B",
    "font-size": "11px",
    width: "260px"
  }
});

我们正在使用 Material-UIwithStyles高阶组件，如下所示：

export default withStyles(styles)(MyClass);

当它通过 babel 运行时，我们会得到类似的东西：

var styles = function styles(theme) {
  return {
    spinner: {
      margin: theme.spacing.unit * 2,
      "margin-left": "calc(50% - 25px)"
    },
    topDiv: {
      display: "flex",
      "align-items": "center",
      width: "100%",
      "padding-bottom": "10px",
      "font-size": "40px",
      color: "white",
      "font-family": "Univia Pro, sans-serif",
      "font-weight": "350",
      "text-shadow": "0.02em 0.02em rgb(91, 91, 91, 0.75)",
      "border-style": "none none solid none",
      "border-width": "2px",
      "margin-bottom": "30px"
    },
    dataImport: {
      margin: "0px 10px 0px 10px"
    },
    paper: {
      width: "25%",
      "max-height": "100%",
      backgroundColor: "rgba(255, 255, 255, 0.95)",
      padding: "20px",
      "font-size": "13px",
      "overflow-y": "scroll"
    },
    instructionsDiv: {
      "border-style": "none none solid none",
      "border-width": "2px",
      "border-color": "rgba(0, 0, 0, 0.4)"
    },
    informationDiv: {
      "border-style": "none none solid none",
      "border-width": "2px",
      "border-color": "rgba(0, 0, 0, 0.4)"
    },
    buttonsDiv: {
      display: "flex",
      "flex-direction": "column",
      "justify-content": "center",
      "align-items": "center"
    },
    pluginStoreButton: {
      color: "white",
      "background-color": "#CFD134",
      margin: "15px 0px 15px 0px",
      width: "255px",
      "&:hover": {
        "background-color": "#b6b742"
      }
    },
    integrationStoreButton: {
      color: "white",
      "background-color": "#2699FB",
      "margin-bottom": "10px",
      width: "255px",
      "&:hover": {
        "background-color": "#2f7cbf"
      }
    },
    emailTeamButton: {
      "margin-top": "10px",
      "background-color": "#EDF3F0",
      "&:hover": {
        "background-color": "#c9d3ce"
      },
      color: "#186A3B",
      "font-size": "11px",
      width: "260px"
    }
  };
};

和：var _default = (0, _withStyles.default)(styles)(MyClass);

_withStyles像这样导入：var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));

没有错误消息，但很明显样式已经消失，因为布局完全无法使用。

标签： cssreactjsbabeljsmaterial-ui

css - 带有 babel 的“带样式”的 Material UI，样式已损坏

问题描述

解决方案

推荐阅读