First Time React, Coming from Angular. CSS Grid?

Question

How can I style a component to lay out subcomponents in a grid?

I've been trying to do it multiple ways:

Method 1:

Import custom CSS Stylesheet - in the parent component, I'm importing the stylesheet with: import './style.css' (not the actual file, but it get's the point across.)
Target and apply styles: Should be as simple as .targetClassName{display:grid;grid-template-columns: repeat(4,1fr);}

In my experience, it doesn't make it to the DOM.

Method 2:

Set a style as an object: const style = { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)'};
Apply inline to the component: <div className='items' style={this.style}></div>

for some reason isn't working as well.

Just for some background, this is the component:

import React, {Component} from 'react';
import Computer from './computer';

import './styles/computers.sass';


class Computers extends Component{

  deleteComputer(_id){
    this.props.onDelete(_id);
  }


  render(){
    const compListStyle = {
      display: 'grid',
      gridTemplateColumns: 'repeat(4, 1fr)'
    }
    let computerList;
    if(this.props.computers){
      computerList = this.props.computers.map(x => {
        console.log(x);
        return(
          <Computer computer={x} onDelete={this.deleteComputer.bind(this)}/>
        )
      })
    }
    return(
      <div className='computers' style={this.compListStyle}>
        {computerList}
      </div>
    );
  }
}

export default Computers;

Agney · Accepted Answer · 2018-03-09 17:01:54Z

1

You are using a class variable in styles object. So you should set it to one too.

this.compListStyle = {
  display: 'grid',
  gridTemplateColumns: 'repeat(4, 1fr)'
}

The first method should be working if you are using a style-loader/sass-loader to load the style files.

answered Mar 9, 2018 at 17:01

Agney

19.3k7 gold badges60 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Agney Over a year ago

Just Happy to Help

Liam · Accepted Answer · 2018-03-09 19:32:45Z

Actually, there are many ways to use CSS in react I just don't prefer you to keep your styles inside render() keep it out of your component

 const compListStyle = {
      display: 'grid',
      gridTemplateColumns: 'repeat(4, 1fr)'
    }

class Computers extends Component{ ...}

And use them like

 <div className='computers' style={compListStyle}>
    {computerList}
  </div>

As well when you're iterating data don't keep them in render()

   {this.props.computers && this.props.computers.map(x => {
                console.log(x);
                return (
                <div>
                <Computer computer={x} onDelete={this.deleteComputer.bind(this)}/>
                </div>)}
                )}

Here's final code very clean and small

const compListStyle = {
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)'
};

class Computers extends Component {
    deleteComputer(_id) {
        this.props.onDelete(_id);
    }
    render() {
        return (
            <div>
                {this.props.computers && this.props.computers.map(x => {
                    console.log(x);
                    return (
                        <div className='computers' style={compListStyle}>
                            <Computer computer={x} onDelete={this.deleteComputer.bind(this)}/>
                        </div>)}
                )}
            </div>
        );
    }
}

export default Computers;

As well here are some tips

ReactJS Folder structures

Handle hundreds of images in ReactJS

Collectives™ on Stack Overflow

First Time React, Coming from Angular. CSS Grid?

Method 1:

Method 2:

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Method 1:

Method 2:

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related