CODEWITHSUNDEEP
cssreactjs
Sina Mirzahosseinian
Sina Mirzahosseinian

Reputation: 103

The CSS doesn't apply to jsx

This is the css file named Layout.css :

.Content {

      margin-top: 16px;
      color : red;

}

and this is the component named Layout.js :

import React from 'react';
import classes from './Layout.css';
// const Fragment = React.Fragment;
const { Fragment } = React;

const Layout = (props) => {
  return (
    <Fragment>
      <div> toolbar , sidedrawer , backdrop </div>

      <main className={classes.Content}>{props.children}</main>
    </Fragment>
  );
};

export default Layout;

and the problem is the css doesnt apply to component, i have this problem in my several components.

Upvotes: 2

Views: 81

Answers (1)

supra28
supra28

Reputation: 1636

You have to import your css file like this :

import './Layout.css';

and then use the class like this :

<main className="Content">{props.children}</main>

Upvotes: 1

Related Questions