How do I use className to change appearance of html in reactjs?-CodePudding

I am currently learning ReactJS from a youtube tutorial and am trying to use className's to make the page look better. The tutorial I am following only added: className="card"> in the opening tag of a div element and it changed the page appearance though it does not seem to be working for me. Forgive me if this is a dumb question as I am not aware whether you have to import your own css files to change the appearance and the tutorial just did not show it. I would appreciate any responses. Thank you.

CodePudding user response：

You need to learn about CSS (cascading style sheets) (: HTML elements can be given classes like this

<html>
<head>
   <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="card">content</div>
</body>
</html>

And if you have a stylesheet (file ending in .css included in the <head> of your document

/* styles.css */ 
.card {
    background-color: red;
}

The styles described in the .card class section will be applied to your html element (in this case a red background)

You probably missed a step in your tutorial about including some pre-created style sheet.

CSS Basics

CodePudding user response：

Answer updated after this comment :

The reason for that is that the css is being imported on a component above the one where he declared that code.

Example code :

/* App JS */
import './App.css';
import Title from './Title.jsx';

function App() {
  return (
    <div className="App">
      <Title />
    </div>
  );
}

export default App;

/* App.css */
.App{
  font-size: 14px;
}
.title {
  color: #e60000;
  font-size: 20px;
  text-decoration: underline;
}

/* Title.jsx */
export default function (){
    return <div className="title">Test</div>
}

CodePudding user response：

The difference here is you are wanting to write JSX, and not standard HTML... it is VERY close, with some small but important differences.... here's an example of the same thing in HTML and JSX:

HTML: <div class="App">{/* some other code*/}</div>
JSX:<div className="App">{/* some other code */}</div>

The difference here is class/className. JSX uses camel case for an HTML element's attributes, as well as using different names for some as in this case. This is just the start of the differences but hopefully this leads you in the right direction!