是否可以在我們的 React 網站中為不同的組件使用不同的 CSS 庫？

Question

例如，我有 3 個組件==> Home、About、Contact 。

是否可以將 Material ui css 庫用於 Home 組件，將語義 ui css 庫用於 About 組件，將 bootstrap 用於 Contact 組件。

如果是，那么如何？

Answer 1

當然可以，我認為更好的問題是您是否應該這樣做。
混合框架可能會導致用戶體驗不一致。 由於非技術原因，通常會避免這種情況。

不過，有時您需要慢慢過渡，並且軟件的不同部分可能看起來不同。

當您確定您確實想要混合不同的 ui 框架時，只需遵循這些框架的常規“入門”指南即可。

這是一個帶有 mui 按鈕和引導按鈕的代碼沙箱

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 />);