0

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.

Improve this question
3
  • Please add the code that you tried! Commented Jul 6, 2021 at 11:28
  • en.wikipedia.org/wiki/CSS-in-JS Commented Jul 6, 2021 at 11:36
  • You can assign style properties to elements Commented Jul 6, 2021 at 11:36

2 Answers 2

Reset to default
1

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>
);
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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

Improve this answer

1 Comment

"just create any .css file and import in react component." — You can't just do that, it depends on the use of a bundler which supports CSS. The question was also asking about putting CSS in a .js file rather than importing a CSS file.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.