如何在React中为每个组件设置样式？

Question

I have following React code and it's CSS for a Scrolling functionality. When I am doing props.children.map it is giving me an error "TypeError: props.children.map is not a function". It may be a simple mistake since I am still learning React.js. Any help would be appreciated. Thanks!

**Scroll.js**

import React from 'react';
import './Scroll.css'

const Scroll = (props) => {

    return(
        <div class="slider">
        <div class="slide">

        {props.children.map((component) => 
        <div class="slide"> component </div>)
        }

        </div>
        </div>
    );
};
export default Scroll;

Scroll.css

.slider {
  width: 300px;
  height: 300px;
  display: flex;
  overflow-x: auto;
}
.slide {
  width: 300px;
  flex-shrink: 0;
  height: 100%;
}

Answer 1

The error you're getting makes sense because children is just one ReactNode and map will only work on an array of multiple values.

You could do something like:

import React from "react";
import "./Scroll.css";

const Scroll = props => {
  return (
    <div class="slider">
      <div class="slide">{props.children}</div>
    </div>
  );
};
export default Scroll;

And invoke Scroll like:

const SomeParentComponent = () => {
  return (
    <Scroll>
      <div>
        <SomeChild />
        <SomeChild />
        <SomeChild />
      </div>
    </Scroll>
  );
};

Answer 2

You can trasforme you css in object like

const styles = ({
input: {
    display: 'none',
},
pointerBorder: {
    borderWidth: '4px',
    borderStyle: 'dashed',
    borderColor: 'grey',
    paddingTop: '40px',
    paddingBottom: '40px',
},
iconUpload: {
    fontSize: '100px',
    cursor: 'pointer',
}

});

it is just one example. For to use, just call de object

            <div className={styles.input}>

One more thing. try to comment the code

{props.children.map((component) => 
    <div class="slide"> component </div>)
    }

and run again, i think it is not a style probleam.