如何在 React 中动态导入两个 CSS 框架？答案

【问题标题】：How can I import two css frameworks dynamically in React?如何在 React 中动态导入两个 CSS 框架？
【发布时间】：2019-08-26 16:30:06
【问题描述】：

我正在一个带有 react 的项目中工作，我的客户希望我有一个按钮来在 Bootstrap 和 Foundation 之间切换。

我检查了一些选项，得出的结论是最好使用钩子来管理每个状态，但我不知道如何正确导入它们。

const theme = (mode: string) =>
  mode === "dark"
    ? "bootstrap/dist/css/bootstrap.css"
    : "foundation-sites/dist/css/foundation.min.css";

export default theme;



import theme from "./theme/experiment.js";

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

我希望 React 根据“mode”的值导入正确的主题

【问题讨论】：

标签： reactjs typescript import

【解决方案1】：

您可以在 react 组件中的虚拟 DOM 中导入 css。

<link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.css" />

这意味着您可以通过使用状态来更改 href attr。

<link
  rel="stylesheet"
  type="text/css" 
  href={this.props.isBootstrap ? "bootstrap/dist/css/bootstrap.css" : "foundation-sites/dist/css/foundation.min.css"} 
/>

当然你可以通过 state 或 props 来改变你的 css。

【讨论】：