@mui/codemod
Version:
Codemod scripts for Material UI.
107 lines (106 loc) • 2.98 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = App;
var _react = _interopRequireDefault(require("react"));
var _core = require("@material-ui/core");
var _clsx = _interopRequireDefault(require("clsx"));
var _jsxRuntime = require("react/jsx-runtime");
var _StyledComp, _Fragment2;
const styles1 = {
test: {
backgroundColor: "purple",
color: "white"
}
};
function Comp1({
classes
}) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: classes.test,
children: "Comp1"
});
}
const StyledComp1 = (0, _core.withStyles)(styles1)(Comp1);
const styles2 = {
test: {
backgroundColor: "black",
color: "lime"
},
test2: {
backgroundColor: "white",
color: "purple",
"&$test": {
backgroundColor: "pink",
color: "blue"
}
}
};
function Comp2({
classes
}) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: classes.test,
children: "Comp2 test"
}), _StyledComp || (_StyledComp = /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp1, {})), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: classes.test2,
children: "Comp2 test2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _clsx.default)(classes.test, classes.test2),
children: "Comp2 test and test2"
})]
});
}
const StyledComp2 = (0, _core.withStyles)(styles2)(Comp2);
function Comp3({
classes
}) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: classes.test,
children: ["Inline Styles", /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: classes.test2,
children: "Nested Inline Styles"
})]
});
}
const StyledComp3a = (0, _core.withStyles)({
test: {
backgroundColor: "yellow"
}
})(Comp3);
const StyledComp3b = (0, _core.withStyles)({
test: {
backgroundColor: "yellow",
color: "lime",
"& $test2": {
backgroundColor: "orange"
}
},
test2: {}
})(Comp3);
const styles3c = theme => {
const bgColor1 = theme.palette.primary.main;
const color1 = theme.palette.primary.contrastText;
const bgColor2 = theme.palette.secondary.main;
const color2 = theme.palette.secondary.contrastText;
return {
test: {
backgroundColor: bgColor1,
color: color1,
"& $test2": {
backgroundColor: bgColor2,
color: color2
}
},
test2: {}
};
};
const StyledComp3c = (0, _core.withStyles)(styles3c)(Comp3);
function App() {
return _Fragment2 || (_Fragment2 = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp2, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp3a, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp3b, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp3c, {})]
}));
}