是否可以在我们的 React 网站中为不同的组件使用不同的 CSS 库？

Question

For example , I have 3 components==> Home, About, Contact .

Is it possible to use material ui css library for Home component, semantic ui css library for About component and bootstrap for Contact Component.

If yes, then How?

Answer 1

Sure you can, I think the better question is if you should.
Mixing frameworks would likely lead to in inconsistent UX. That's something normally avoided for non-technical reasons.

Still, sometimes you need to transition things slowly, and might have different parts of your software look different.

When you're certain you actually want to mix different ui frameworks, just follow the regular 'get-started' guides for those frameworks.

here's a code-sandbox with both a mui-button and a bootstrap-button

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import Button from "@mui/material/Button";
import { Button as BootstrapButton } from "react-bootstrap";

import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  return (
    <>
      <Button variant="contained">Hello World</Button>
      <br />
      <br />
      <BootstrapButton variant="primary">Primary</BootstrapButton>
    </>
  );
}

ReactDOM.createRoot(document.querySelector("#app")).render(<App />);