JS中的CSS，如何让props.className成为优先类

Question

我们需要组件，其中作为 props 传递的类应该比默认类具有更高的优先级。

当将classes作为prop传递时，组件优先 在他自己的文件中创建的类。

Text.jsx

// this will be a component in another folder, it will be used in the whole app so it 
// should haveDYNAMIC styling
function Text(props) {
  const useStyles = makeStyles(theme => ({
    default: {
      fontSize: 18,
      color: "black"
    }
  }));

  const classes = useStyles();

  return (
    <div className={classNames(classes.default, props.className)}>
      {props.children}
    </div>
  );
}

App.jsx

function App() {
  const useStyles = makeStyles(theme => ({
    title: {
      fontSize: 80,
      color: "red"
    },
    notGoodPractice: {
      fontSize: "80px !important"
    }
  }));
  const classes = useStyles();

  return (
    <div className="App">
      <Text className={classes.title}>Text in here is 18px</Text>
      <Text className={classes.notGoodPractice}>
        Text in here is 80px
      </Text>
    </div>
  );
}

反应片段 => CodeSandBox

Answer 1

您可以通过这种方式对作为 props 传递的类进行优先级排序。

请确保您没有在其上应用makeStyles，以便您可以在孩子中正确访问它们。

import React from "react";
import ReactDOM from "react-dom";
import { makeStyles } from "@material-ui/core/styles";

// this is how we will use the Text component
function App() {
  const style = {
    title: {
      fontSize: "80px",
      color: "red",
      "@media (max-width: 767px)": {
         color: "green"
      }
    },
    notGoodPractice: {
      fontSize: "80px"
    }
  };

  return (
    <div className="App">
      <Text class1={style.title}>Title should be with size 80px</Text>
      <Text class1={style.notGoodPractice}>Title should be with size 80px</Text>
    </div>
  );
}

// this will be a component in another folder, it will be used throw the in app so it should be as DYNAMIC as possible
function Text(props) {
  const useStyles = makeStyles(theme => ({
    default1: {
      fontSize: 18,
      color: "black"
    },
    priorityClass: props => props.class1
  }));

  const { default1, priorityClass } = useStyles(props);
  return <div className={`${default1} ${priorityClass}`}>{props.children}</div>;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

查看实时沙盒https://codesandbox.io/s/zen-voice-mb60t