1

Tengo 2 componentes que deseo exportar para usarlos en otro componente. Hay alguna manera de exportarlos a todos por defecto ? Intente haciendo : export default { NoteContainer, NoteHeader }; export default * ; pero no funcionó.

import styled from 'styled-components';

const NoteContainer = styled.div`
  textarea {
    background-color: var(--color-white);
    border: none;
    padding: 16px 12px;
    width: 100%;
    height: 70vh;
    resize: none;
    scrollbar-width: none; /* Firefox */

    &::active,
    &::focus {
      outline: none;
      border: none;
    }

    ::-webkit-scrollbar {
      display: none;
    }
  }
`;

const NoteHeader = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-main);
  padding: 10px;
`;

export default { NoteContainer, NoteHeader };

1 respuesta 1

1

No puedes utilizar export default si vas a exportar dos valores, de la documentación:

Si queremos exportar UN SÓLO valor o tener uno por defecto para nuestro módulo, podemos usar un export por defecto:

Te recomiendo que lo hagas por medio de exports simples:

import styled from 'styled-components';

export const NoteContainer = styled.div`
  textarea {
    background-color: var(--color-white);
    border: none;
    padding: 16px 12px;
    width: 100%;
    height: 70vh;
    resize: none;
    scrollbar-width: none; /* Firefox */

    &::active,
    &::focus {
      outline: none;
      border: none;
    }

    ::-webkit-scrollbar {
      display: none;
    }
  }
`;

export const NoteHeader = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-main);
  padding: 10px;
`;

Luego en donde lo necesites puedes hacer algo como:

import {NoteContainer, NoteHeader} from "./modulo"

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.