Add additional css class name in react app

Question

I'm using bulma css in my react application. And I have some additional css in my css module file to set image size.

Additionally I want to use css classes from bulma like my-2 mr-4 in my main wrapping div.

How do I add these classes to the main wrapping 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;
  }

Majid Savalanpour · Accepted Answer · 2020-06-21 20:46:35Z

2

Use classnames npm mudule. classnames is conditionally joining classNames together.install this mudule with

npm install classnames --save

or

yarn add classnames

and use for example :

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;

also you can use this code without any module

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

edited Jun 21, 2020 at 20:46

answered Jun 21, 2020 at 20:36

Majid Savalanpour

1,8442 gold badges17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

itsanewabstract · Accepted Answer · 2020-06-21 20:40:10Z

1

You can pass more classes into className using template literal strings. Here's an example passing in the my-2 and mr-4 you wanted to add:

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;

answered Jun 21, 2020 at 20:40

itsanewabstract

1,0365 silver badges12 bronze badges

Comments

lanxion · Accepted Answer · 2020-06-21 20:39:09Z

0

All that classes.Logo does is return a string corresponding to the css class name for Logo which they have made unique(for scoping purposes), so you can just append it to a pre existing string, either by defining string in a variable or by doing it inline

Eg:

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

Or doing it inline like <div className={'my-2 mr-4 ' + classes.Logo}>

P.S would recommend first approach because you can change the string conditionally. Oh, and make sure that the classes are space seperated in the string.

answered Jun 21, 2020 at 20:39

lanxion

1,4301 gold badge10 silver badges22 bronze badges

Comments

apena · Accepted Answer · 2020-06-21 20:58:46Z

The way you have it implmented you need to install the Bulma npm package. Then in the .scss file you are importing in your React code (in your case the logo functional component file) you need to import whatever Bulma CSS you want to use from the node_modules folder for example your Logo.module.scss could contain something like this:

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

Finally include the class names you want to use by appending them to the logoClasses string and setting them as the value (delimited by a space) for the className attribute in your wrapping div:

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

Collectives™ on Stack Overflow

Add additional css class name in react app

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related