CODEWITHSUNDEEP
javascriptcssreactjs
psudo
psudo

Reputation: 1578

Add additional css class name in react app

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

Upvotes: 2

Views: 3505

Answers (4)

apena
apena

Reputation: 2331

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

Upvotes: 0

Majid Savalanpour
Majid Savalanpour

Reputation: 1823

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`}

Upvotes: 2

itsanewabstract
itsanewabstract

Reputation: 1036

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;

Upvotes: 1

lanxion
lanxion

Reputation: 1430

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.

Upvotes: 0

Related Questions