reactjs - Applying css on a imported react component

Question

I have a UserPreview component which have other components( avatar, bio, followstats). When, I am trying to style these components, nothing happens. I tried inline styling as well. But, Styling on a normal div is working perfectly fine. I have no idea why its happening.

import React from "react";

import Avatar from "../../Atoms/Avatar";
import Bio from "../../Atoms/Bio";
import FollowStats from "../../Atoms/FollowStats";

import Profile from "../../Assets/images/profile.jpg";

import useStyles from "./style";

const UserPreview = () => {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <Avatar
        size="large"
        image={Profile}
        name="Aman"
        username="dev_aman7"
        className={classes.avatar}
        style={{ border: "1px solid red" }}
      />
      <Bio value="This is Bio" className={classes.bio} />
      <div className={classes.edit}>Edit Profile</div>
      <FollowStats followers={20} following={30} className={classes.follow} />
    </div>
  );
};

export default UserPreview;

Styles

import makeStyles from "@material-ui/styles/makeStyles";

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    alignItems: "center",
    maxWidth: "20rem",
    flexDirection: "column",
    paddingTop: "1rem",
  },
  avatar: {
    padding: "5rem",
    border: "1px solid black",
  },
  bio: {
    marginTop: "1rem",
  },
  edit: {
    color: theme.palette.blue,
    fontSize: theme.f5,

    margin: "auto",
    marginTop: ".5rem",
  },
  follow: {
    margin: "1.5rem",
    width: "100%",
  },
}));

export default useStyles;

Material ui is used as design library

Avatar.jsx

import React from "react";

import ClassNames from "classnames";

import PropTypes from "prop-types";
import useStyles from "./style";

const Avatar = ({ image, size, name, username }) => {
  const classes = useStyles();

  const container = ClassNames(
    { [classes.root_small]: size === "small" },
    { [classes.root_large]: size !== "small" }
  );

  const usernameClass = ClassNames(classes.username, {
    [classes.grey]: size === "small",
  });

  const imgClass = ClassNames(
    classes.img,
    { [classes.img_small]: size === "small" },
    { [classes.img_large]: size !== "small" }
  );

  return (
    <div className={container}>
      <div>
        <img src={image} alt="Profile_image" className={imgClass} />
      </div>
      {size === "small" ? null : <div className={classes.name}>{name}</div>}
      <div className={usernameClass}>@{username}</div>
    </div>
  );
};

Avatar.defaultProps = { name: "" };

Avatar.propTypes = {
  image: PropTypes.string.isRequired,
  size: PropTypes.string.isRequired,
  name: PropTypes.string,
  username: PropTypes.string.isRequired,
};

export default Avatar;

import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles((theme) => ({
  root_small: {
    display: "flex",
    alignItems: "center",
  },
  root_large: {
    maxWidth: "20rem",
    textAlign: "center",
  },
  img: {
    borderRadius: "50%",
  },
  img_small: {
    height: "2.5rem",
    width: "2.5rem",
    marginRight: "1rem",
  },
  img_large: { width: "4.5rem", height: "4.5rem" },
  name: {
    fontSize: theme.f2,
    fontWeight: theme.bold6,
    marginTop: "0.5rem",
    color: theme.palette.grey,
  },
  username: {
    fontSize: theme.f4,
    color: theme.palette.pinkGrey,
  },
  grey: {
    color: theme.palette.grey,
  },
}));

export default useStyles;

question from:https://stackoverflow.com/questions/65641667/applying-css-on-a-imported-react-component

Answer 1

Waitting for answers