What is the best way to configure custom CSS styles in a React project?

Question

What is the best way to configure custom CSS styles in a React project?

I've been trying to position my Grid component from Material-UI, but so far, I haven't had any luck. What could be the issue here?

class Scene extends React.Component {
  render() {
    const mystyle = {
        backgroundColor: "DodgerBlue",
        position: "absolute",
        top: "125px",
        left: "125px",
        width: "100px",
        height: "100px"
    };

    return (
      <div className={mystyle}>
      <Grid container>
        <Grid item xs="2">
          <Board init={1} end={2}/>
        </Grid>
      </Grid>
      </div>
    );
  }
}
export default Scene;

https://i.sstatic.net/2FdDX.png

css reactjs material-ui

Answer 1

Answer №1

It appears that in your case, the issue lies with className={mystyle}. The variable mystyle is not a "className", but rather an actual "style" object. Try replacing className={mystyle} with style={mystyle}, this should work by converting those styles into inline styles within the div.

Regarding the question of "How to set custom CSS styles in React?", a simple search will yield numerous answers and articles on the topic. For example, you can check out this article, which covers (at least) 4 ways to apply styling in React:

Using Css Stylesheets
Inline styling, including actual inline styling as well as using an object (similar to what you attempted)
CSS Modules
Utilizing a css-in-js library like Styled-components to create "styled components"
Exploring library-specific methods, such as turning a JavaScript object into a className using React Hooks (which may align with the approach desired, particularly the Material-UI framework)

Answer 2

It appears that in your case, the issue lies with className={mystyle}. The variable mystyle is not a "className", but rather an actual "style" object. Try replacing className={mystyle} with style={mystyle}, this should work by converting those styles into inline styles within the div.

Regarding the question of "How to set custom CSS styles in React?", a simple search will yield numerous answers and articles on the topic. For example, you can check out this article, which covers (at least) 4 ways to apply styling in React:

Using Css Stylesheets
Inline styling, including actual inline styling as well as using an object (similar to what you attempted)
CSS Modules
Utilizing a css-in-js library like Styled-components to create "styled components"
Exploring library-specific methods, such as turning a JavaScript object into a className using React Hooks (which may align with the approach desired, particularly the Material-UI framework)

Answer 3

Answer №2

One option is to pass it as a style attribute, or if you're considering using multiple classes, you can utilize "css-in-js" for styling your components. Learn more about this approach in the material-ui documentation.

import { withStyles } from '@material-ui/core/styles';

const styles {
   mystyle: {
        backgroundColor: "DodgerBlue",
        position: "absolute",
        top: "125px",
        left: "125px",
        width: "100px",
        height: "100px"
    }
}

class Scene extends React.Component {
  render() {
    const { classes } = this.props;

    return (
      <div className={classes.mystyle}>
      <Grid container>
        <Grid item xs="2">
          <Board init={1} end={2}/>
        </Grid>
      </Grid>
      </div>
    );
  }
}

export default withStyles(styles)(Scene);

You can also achieve a similar result using hooks:

// ...
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  mystyle : {
        backgroundColor: "DodgerBlue",
        position: "absolute",
        top: "125px",
        left: "125px",
        width: "100px",
        height: "100px"
    }
});

function Scene () {

    const classes = useStyles();

    return (
      <div className={classes.mystyle}>
      <Grid container>
        <Grid item xs="2">
          <Board init={1} end={2}/>
        </Grid>
      </Grid>
      </div>
    );

}

export default Scene;

Answer 4

One option is to pass it as a style attribute, or if you're considering using multiple classes, you can utilize "css-in-js" for styling your components. Learn more about this approach in the material-ui documentation.

import { withStyles } from '@material-ui/core/styles';

const styles {
   mystyle: {
        backgroundColor: "DodgerBlue",
        position: "absolute",
        top: "125px",
        left: "125px",
        width: "100px",
        height: "100px"
    }
}

class Scene extends React.Component {
  render() {
    const { classes } = this.props;

    return (
      <div className={classes.mystyle}>
      <Grid container>
        <Grid item xs="2">
          <Board init={1} end={2}/>
        </Grid>
      </Grid>
      </div>
    );
  }
}

export default withStyles(styles)(Scene);

You can also achieve a similar result using hooks:

// ...
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  mystyle : {
        backgroundColor: "DodgerBlue",
        position: "absolute",
        top: "125px",
        left: "125px",
        width: "100px",
        height: "100px"
    }
});

function Scene () {

    const classes = useStyles();

    return (
      <div className={classes.mystyle}>
      <Grid container>
        <Grid item xs="2">
          <Board init={1} end={2}/>
        </Grid>
      </Grid>
      </div>
    );

}

export default Scene;

What is the best way to configure custom CSS styles in a React project?

Answer №1

Answer №2

Similar questions

What is the correct way to align a shape with a border width in the center of its parent input button?

How can I use map functions to change the border color of specific items when clicked?

How can I center two div buttons within a bootstrap column?

Behold the magic of a three-column layout with sticky scroll behavior and an absolute

Ways to adjust flex division to occupy the entire height of its container

Design of website built on Bootstrap framework seems distorted on Firefox browser

What is the best way to bring a JavaScript module into the public folder of a React

"Troubleshooting Bootstrap nav-pills' failure to update displayed content

Limit the Datepicker in MUI (v5) to only accept two-digit years

Exporting components in React allows you to make them reusable and

Using React to send asynchronous state from a parent component to a child component following a fetch request within a functional component

Retrieving the background image URL from inline CSS using jQuery

Multiple images overlapping each other in a dynamic parallax effect

Adjusting the width of a Material UI drawer: Tips and tricks

Enhance the background property in createMuiTheme of Material-UI by incorporating additional properties using Typescript

React-table fails to show newly updated data

What is the best method for eliminating buttons and text in a row using CSS?

I'm experiencing difficulty with the image path, as no images are visible on my Next.js application after deployment

The Material UI list element fails to appear on the screen

The placeholder text color in MUI Textfield appears muted