CODEWITHSUNDEEP
cssreactjs
user15268764
user15268764

Reputation:

Is it possible to use css in .js file in a react app?

I want to map .js file. I need to apply some CSS too. Is it possible to place CSS in a .js file?

  1. I have a constant file at src > Constant > AboutMyselftProgressCount.js and it's code is as below:

    const AboutMyselfProgressCount = [ { ProgressCountTitle: "USER REACHERS", }, { ProgressCountTitle: "WEB DESIGN", }, { ProgressCountTitle: "UI DESIGN", }, { ProgressCountTitle: "ILLUSTRATION", }, ] export default AboutMyselfProgressCount;

  2. Now I've another .js file at src > Routes > Home > Components > AboutMyself > Components > SkillsContent The code is as below:

    import React from 'react' import { Row, Col } from 'react-bootstrap'

    const Skills = (props) => { return ( <>

    {props.ProgressCountTitle}

    </> ) } export default Skills;

Basically in this section I've some stuff that I'm using with props

  1. Now, I've one another .js file at src > Routes > Home > Components > AboutMyself > index.js in which I'm mapping data from No. 1 and No. 2

The code is as:

import React from 'react'
import './style.scss';
import Skills from '../AboutMyself/Components/SkillsContent/index'
import AboutMyselfProgressCount from '../../../../Constant/AboutMyselfProgressCount'

const AboutMyself = () => {
    return (
        <>
        <div className='AboutMyselfBackground'>
            <div className='AboutMyselfContent'>
                <div className='content'>
                <p>ABOUT MYSELF</p>
                <h4>
                I’m a Creative director based on New York, who loves clean, simple & unique design. I also enjoy crafting..
                </h4>
                <a href=''>DOWNLOAD RESUME</a>
                <div className='borderTop'></div>
                {
                    AboutMyselfProgressCount.map((val, ind) => {
                        return (
                            <Skills
                                key={ind}
                                ProgressCountTitle={val.ProgressCountTitle}
                            />
                        )
                    })
                }
                <div className='skillsPara'>
                    <p>
                        Proin laoreet elementum ligula, ac tincidunt lorem accumsan nec. Fusce eget urna ante. Donec massa velit, varius a accumsan ac, tempor iaculis massa. Sed placerat justo sed libero varius vulputate.
                    </p>
                </div>
                </div>
            </div>
            </div>
        </>
    );
}
export default AboutMyself;

All I want to show a progress bar of skills under ProgressCountTitle which is being done using css. So is this possible to place that css of progress bar(s) in file No. 1 using array of objects, array of object(s) as a key value of an object, etc. etc.

I hope I'm clear to all of you with my question.

Upvotes: 0

Views: 1216

Answers (2)

S Henry
S Henry

Reputation: 150

A CSS component for React is Styled-Component. You can specifically design out your element within the same JS file and assign them by unique element name. https://styled-components.com/

This example was taken direct from their documentation

// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// Use Title and Wrapper like any other React component – except they're styled!
render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

Upvotes: 1

Rhythm
Rhythm

Reputation: 106

Yes ofcourse you can

just create any .css file and import in react component.

import './App.css'

and then you can simply add your classNames to your JSX as follows.

<div className='myclass'>
     hello world
</div>

if you want mode advance feature like preventing the global styles and using component bases local styles you can also use css modules in reactjs.

you need to name the css file as anyfilename.module.css

then you need to import like:

import classes from './anyfilename.module.css'

then you can add your style classes to jsx as follows:

<div className='myclass'>
     hello world
</div>

to learn more click here

Upvotes: 0

Related Questions