Creando ListOfCategories y estilos globales

Si quieren ocultar el scroll pero mantener la funcionalidad pueden usar.

const List = styled.ul`
  display: flex;
  overflow: scroll;
  width: 100%;
  &::-webkit-scrollbar {
    display: none;
  }
`

Les paso los estilos

html {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  *, *:before, *:after {
    box-sizing: inherit;
  }

  ul, li, h1, h2, h3, p, button {
    margin: 0;
    padding: 0;
  }

  ul {
    list-style: none;
  }

  button: {
    background: transparent;
    border: 0;
    outline: 0;
  }

  body {
    background: #fefefe;
    height: 100vh;
    margin: 0 auto;
    max-width: 500px;
    overscroll-behavior: none;
    width: 100%;
  }

  #app {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    overflow-x: hidden;
    min-height: 100vh;
    padding-bottom: 10px;
  }```

Para no agregar un div innecesario en nuestro App.js podemos usar React Fragments, que react ‘lee’ como elementos, pero no son renderizados en nuestro DOM, quedaría de esta manera:

import React from 'react';

import { GlobalStyles } from './GlobalStyles';
import CategoriesList from './components/CategoriesList';

const App = () => (
  <>
    <GlobalStyles />
    <CategoriesList />
  </>
);

export default App;

React.Fragment es otra opción cuando se quiere exportar más de un componente sin añadir un elemento adicional al DOM.

Algo que no me gusta y que definitivamente no recomiendo por muchas razones es utilizar los mismos nombres de archivos una y otra y otra vez porque cuando te marca error muchas veces te dice: tu error está en index.js pero cuál de los 10 millones de index.js que creaste y tienes.

También así

// ...
<>
	<GlobalStyle />
	<ListOfCategories />
</>

Una mejor manera de envolver los componentes de GloblaStyles y ListOfCategories es usando React Fragment asi el componente de App devuelve solo eso dos componentes sin el div la sintaxis seria la siguiente

export const App = () => (
  <>
    <GlobalStyle />
    <ListOfCategories />
  </>
);

Si copian los estilos globales de la descripción del video, agregar el padding a la regla CSS

ul, li, h1, h2, h3, p, button {
	margin: 0; 
	padding: 0;
        }

Más adelante en el curso les puede ocurrir un problema de diseño.

Nota: Los archivos adjuntos a esta clase estan correctos, no requieren esta actualización

Solo una pequeña corrección del minuto 3:55 donde los valores del padding corresponden es 0 a top y bottom y 8px a right y left.

.map(category)
El category que está después del método map Viene siendo el componente o viene siendo un identificador especial

Les recomiendo esta extencion
Auto Rename Tag
Es para que una vez renombres la etiqueta de apertura automaticamente renombras la etiqueta de cierre 😄

Gracias!! muy interesante 😃

A opinion personal, usar style-component es poco intuitivo, y mi razon es que si quiero leer luego mi componente como las etiquetas HTML (JSX) han cambiado tendria que ir a ver a que etiqueta se refiere en los estilos. Luego pense, no pasa nada modifico el nombre de la etiqueta estulizada para saber a que tag (h1, h2, ... p, etc) estoy asociando pero ... si cambio la etiqueta tendria que tambien cambiar el nombre. So ... no veo ninguna utilidad en comparacion a utilizar SASS con simplemente un nombre de clase. Valorenlo y dejen saber que piensan. Saludos

Esta es la documentación de la librería y muestra varios ejemplos de como usar createGlobalStyle entre otras cosas.

https://www.styled-components.com/docs/api

Si están usando prettier, aparte de instalar la extensión recomendada, pueden hacer de esta forma los estilos globales, para que les formatee el css. O al menos a mi no me estaba funcionando el formato con createGlobalStyle y así lo solucioné:

import styled from 'styled-components';

export const GlobalStyle = styled.createGlobalStyle`
  html {

ListOfCategories/index.js

import React from 'react';
import { Category } from '../Category';

import {List, Item} from './styles'

export const ListOfCategories = () => {
    return (
        <List>
            {
                [1,2,3,4].map(category => 
                    <Item key = {category}>
                        <Category />
                    </Item>
                )
            }
        </List>
    )
}

ListOfCategories/styles.js

import styled from 'styled-components';

export const List = styled.ul`
    display: flex;
    overflow: scroll;
    width: 100%;
    &::-webkit-scrollbar {
        display: none;
    }

  `

export const Item = styled.li` 
    padding: 0 8px;
    list-style: none;
`

GlobalStyles.js

import { createGlobalStyle } from 'styled-components';

export const GlobalStyle = createGlobalStyle` 
    html {
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    
    *, *::before, *::after {
            box-sizing: inherit;
    }
    
    ul, li, h1, h2, h3, p, button {
            margin: 0;
    }

    ul {
            list-style: none;
    }

    button {
            background: transparent;
            border: 0;
            outline: 0;
    }

    body {
            background: #fefefe;
            height: 100vh;
            margin: 0 auto;
            max-width: 500px; //mobile first
            overscroll-behavior: none;//evita que haya rebotes cuando usemos el scroll
            width: 100%;
    }

    #app {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
            overflow-x: hidden;
            min-height: 100vh;
            padding-bottom: 10px;
    }
`

App.js

import React from "react";

//styles
import { GlobalStyle } from "./GlobalStyles";

import { ListOfCategories } from './Components/ListOfCategories';



export const App = () => (
    <>
        <GlobalStyle />
        <ListOfCategories />
    </>
)

Genial

Si desean que cambiando el nombre de la etiqueta de apertura se modifique al mismo tiempo la de cierre (por ejemplo para pasar de ul a List), pueden usar esta extensión esta para vscode

alguien mas ha tenido problemas con los estilos globales en produccion? en desarrollo funcionan perfecto pero en produccion no cargan, de hecho, no me carga ningun estilo en realidad.

Como puedo hacer que mi prettier le de formato a los archivos de style?

Alguien sabe cómo hacer desaparecer las barras de scroll?

Si no quieren preocuparse cambiando las etiquetas de apertura y cierre instalen este plugin https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Asi, si cambian la etiqueta de apertura se cambia la de cierre automaticamente.

Hice un teléfono, para darle mi toque. Sí a alguien le interesa, este es el GlobalStyle.

import { createGlobalStyle } from 'styled-components'

export const GlobalStyle = createGlobalStyle`
    html {
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
        
    *, *::before, *::after {
        box-sizing: inherit;
    }
        
    ul, li, h1, h2, h3, p, button {
        margin: 0;
    }

    ul {
        list-style: none;
    }

    button {
        background: transparent;
        border: 0;
        outline: 0;
    }

    body {
        background: #fefefe;
        height: 100vh;
        margin: 0 auto;
        max-width: 500px;
        overscroll-behavior: none;
        width: 100%;
    }

    #app {
        overflow-x: hidden;
        height: 580px;
        padding-bottom: 10px;
        width: 330px;
        background-color: #fefefe;
        border-radius: 5px;
        margin: 0 auto;
    }

    #phone {
        overflow-x: hidden;
        width: 350px;
        border-radius: 30px;
        background-color: rgb(36, 36, 36);
        margin: 20px auto;
    }

    #camera {
        display: block;
        width: 60px;
        height: 8px;
        border-radius: 20px;
        margin-bottom: 25px;
        background-color: rgb(107, 107, 107);
        left: 42%;
        position: relative;
    }

    #button_down {
        width: 100%;
    }

    #btn_home {
        width: 70px;
        height: 25px;
        display: flex;
        border-radius: 40px;
    }
`

Dentro del index.html está de la siguiente manera.

  <div id="phone"><br>
    <div id="camera">
    </div>
    <div id='app'>
    </div>
    <div id="button_down">
      <div id="btn_home"></div>
    </div>
  </div>

intenté usar una imagen, pero no encontré la manera.