在反应应用程序中添加额外的 css 类名答案

【问题标题】：Add additional css class name in react app在反应应用程序中添加额外的 css 类名
【发布时间】：2020-06-21 20:30:45
【问题描述】：

我在我的反应应用程序中使用 bulma css。而且我的 css 模块文件中有一些额外的 css 来设置图像大小。

此外，我想在我的主要包装 div 中使用来自 bulma 的 css 类，例如 my-2 mr-4。

如何将这些类添加到主包装 div 中？

import React from "react";

import logoimg from "../../assets/images/logo.svg";
import classes from "./Logo.module.scss";

const logo = (props) => {
  return (
    <div className={classes.Logo}>
      <a href="/">
        <img src={logoimg} />
        <p>Resume Builder</p>
      </a>
    </div>
  );
};

export default logo;

.Logo a img {
  width: 80px;
  height: auto;
  vertical-align: middle;
}
.Logo a {
  text-align: center;
}

.Logo a p {
    display: inline-block;
    color: #434343;
    font-weight: bold;
  }

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

您可以使用模板文字字符串将更多类传递给className。这是一个传递您要添加的my-2 和mr-4 的示例：

import React from "react";

import logoimg from "../../assets/images/logo.svg";
import classes from "./Logo.module.scss";

const logo = (props) => {
  return (
    <div className={`${classes.Logo} my-2 mr-4`}>
      <a href="/">
       <img src={logoimg} />
        <p>Resume Builder</p>
      </a>
    </div>
  );
};

export default logo;

【讨论】：

【解决方案2】：

使用类名 npm mudule。 classnames 有条件地将 classNames 连接在一起。安装这个 mudule 与

npm install classnames --save

或

yarn add classnames

并使用例如：

import React from "react";
import cs from "classnames";

import logoimg from "../../assets/images/logo.svg";
import classes from "./Logo.module.scss";

const logo = (props) => {
  return (
    <div className={cs(classes.Logo, 'my-2', 'mr-4' )}>
      <a href="/">
        <img src={logoimg} />
        <p>Resume Builder</p>
      </a>
    </div>
  );
};

export default logo;

您也可以在没有任何模块的情况下使用此代码

className={`${classes.Logo} my-2 mr-4`}

【讨论】：

【解决方案3】：

classes.Logo 所做的只是返回一个与 Logo 的 css 类名称相对应的字符串，他们已经将其设为唯一（用于范围限定），因此您可以将其附加到预先存在的字符串中，或者通过在变量或内联

例如：

const logo = (props) => {
let logoClass = 'my-2 mr-4 ' + classes.Logo;
  return (
    <div className={logoClass}>
      <a href="/">
        <img src={logoimg} />
        <p>Resume Builder</p>
      </a>
    </div>
  );
};

或者像<div className={'my-2 mr-4 ' + classes.Logo}>一样内联

P.S 会推荐第一种方法，因为您可以有条件地更改字符串。哦，请确保类在字符串中以空格分隔。

【讨论】：

【解决方案4】：

您实现它的方式需要安装Bulma npm package。然后在您在 React 代码中导入的 .scss 文件（在您的情况下为徽标功能组件文件）中，您需要从 node_modules 文件夹中导入您想要使用的任何 Bulma CSS，例如您的 Logo.module.scss 可能包含类似这个：

// Import only what you need from Bulma
@import "../../../node_modules/bulma/sass/utilities/_all.sass";
@import "../../../node_modules/bulma/sass/base/_all.sass";
@import "../../../node_modules/bulma/sass/elements/button.sass";
@import "../../../node_modules/bulma/sass/elements/container.sass";
@import "../../../node_modules/bulma/sass/elements/title.sass";
@import "../../../node_modules/bulma/sass/form/_all.sass";
@import "../../../node_modules/bulma/sass/components/navbar.sass";
@import "../../../node_modules/bulma/sass/layout/hero.sass";
@import "../../../node_modules/bulma/sass/layout/section.sass";

最后包含您要使用的类名，方法是将它们附加到 logoClasses 字符串，并将它们设置为包装 div 中 className 属性的值（由空格分隔）：

const logo = (props) => {
let logoClass = 'my-2 mr-4 ' + classes.Logo;
  return (
    <div className={logoClass}>
      <a href="/">
        <img src={logoimg} />
        <p>Resume Builder</p>
      </a>
    </div>
  );
};

【讨论】：