inline style vs className in Componet context-CodePudding

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

CodePudding user response：

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

<div className="container_content">

If you think about it in regular html you would do

<div >

CodePudding user response：

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"