inline style vs className in Componet context

Question

Hello I try to understand when it's necessary to use inline style instead className in this case. I take a long time to solve my problem of translation. At the beginning I want to translate component by using classNameand that's don't work. it's very weird because in my point of view there is no reason that's happen. So I figure there is something wrong in my code, but what... I have not yet found. So I finish trying to translate by using a inline style. Miracle, that's work fine.

My question is why ?

Work well

export function Content() {
  return (
        <div style={{transform: 'translateY(100px)'}}>
        <Test/>
        <Footer />
  </div>)
}

don't work

export function Content() {
  return (
    <div className={container_content}>
        <Test/>
        <Footer />
        </div>
        )
}

css

.container_content {
    transform: translateY(100px);
}

Nota bene : The problem is not from the method. To use className in my jsx must be like that:

import { container_content } from "./test.module.css";

and next

<div className={container_content}><div>

So this part of code is good, the issue seems to come from elsewhere...

Answer 1

What's happening is that when you use the inline style you are passing an object that includes the styling for that component. When you use the className you need to pass in a string for the class you want to use. Right now you are passing a variable name. Either of these works:

<div className={"container_content"}>

OR

<div className="container_content">

If you think about it in regular html you would do

<div class="container_content">

EDIT: Given your updated question, you should just import the css file with:

import "./test.module.css"

and then use the solution I mentioned.

Answer 2

inside the js file, you need to import the CSS file like this

import " css-file-dir";

and then you can Reference to the CSS classes inside your component as a string

example :

className="container_content"