es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Componentes con estilo usando contexto en React

26 Jul, 2023 Programación

Quiero usar el contexto normal de React con styled-components. Soy consciente de los proveedores de temas genéricos en styled-components, sin embargo, sería mucho mejor si pudiera hacer esto usando React.useContext(). ¿Sabes si es posible? Intenté algo como esto.

useConfig

export function useConfig() {
const configCtx = useContext(ConfigContext)
return configCtx
}

styled.ts de ejemplo

import { useConfig } from ‘state’
import styled from ‘styled-components’
const { background_color } = useConfig()

export const VisualSearchWrapper = styled.maincolor: black;
background-color: ${background_color};

Agradecería cualquier ayuda.

Una actualización más:
En el ejemplo ocurrió este problema:

Uncaught TypeError: Cannot read properties of undefined (reading ‘context’)

El ConfigContextProvider se encuentra a continuación

import { createContext } from ‘preact’
import { FC } from ‘preact/compat’
import { useContext, useEffect, useState } from ‘preact/hooks’

export interface ConfigProfile {
background_color: string
}

interface ConfigFunctions {
updateConfigState: (updatedConfig: ConfigProfile) => void
}

type ConfigContextShape = ConfigProfile & ConfigFunctions

export const ConfigContext = createContext(undefined)

export const ConfigContextProvider: FC = ({ children }) => {
const [localState, setLocalState] = useState({
background_color: ”,
})

function updateConfigState(updatedConfig: ConfigProfile) {
setLocalState({ …localState, …updatedConfig })
}

const ctxValue: ConfigContextShape = {
background_color: localState?.background_color ?? ”,
updateConfigState
}

return <configcontext.provider value=”{ctxValue}”>{children}</configcontext.provider>
}

export function useConfig() {
const configCtx = useContext(ConfigContext)
if (configCtx === undefined) {
throw new Error(‘useConfig debe ser utilizado dentro de un ConfigProvider’)
}
return configCtx
}

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, es posible utilizar el contexto de React con styled-components. El código que proporcionaste va en la dirección correcta, pero hay algunas cosas que debes tener en cuenta.

    En primer lugar, el gancho useContext debe ser utilizado dentro de un componente o un gancho personalizado, no en el ámbito de un módulo. En tu ejemplo, el gancho useConfig debería ser utilizado dentro del componente que renderiza VisualSearchWrapper.

    En segundo lugar, debes asegurarte de que el proveedor ConfigContext envuelva al componente que utiliza el gancho useConfig. En tu código, debes asegurarte de que ConfigContextProvider envuelve al componente que utiliza useConfig.

    Por último, el mensaje de error que estás viendo sugiere que el ConfigContext no está definido donde estás tratando de utilizarlo. Asegúrate de que el ConfigContext esté importado correctamente y de que ConfigContextProvider esté renderizando el árbol de componentes que utiliza useConfig.

    Aquí tienes un ejemplo de cómo puedes utilizar useContext con styled-components:

    import React, { useContext } from 'react';
import styled from 'styled-components';
import { ConfigContext } from './config-context';

const VisualSearchWrapper = styled.main`
  color: black;
  background-color: ${({ theme }) => theme.backgroundColor};
`;

export const App = () => {
  const config = useContext(ConfigContext);

  return (
    <configcontext.provider value="{{" backgroundcolor:="" 'red'="" }}="">
      <visualsearchwrapper></visualsearchwrapper>
    </configcontext.provider>
  );
};

    En este ejemplo, VisualSearchWrapper utiliza el objeto theme proporcionado por el ThemeProvider para establecer el color de fondo. Estamos utilizando el gancho useContext para acceder al objeto de configuración proporcionado por ConfigContextProvider.

    Dentro del componente App, estamos envolviendo VisualSearchWrapper con ConfigContextProvider y pasando un valor con una propiedad backgroundColor. Este valor es luego utilizado por el gancho useContext dentro de VisualSearchWrapper.

    Es importante tener en cuenta que el gancho useContext debe ser utilizado dentro de un componente o un gancho personalizado, no en el ámbito de un módulo. Además, asegúrate de que el componente proveedor envuelva el árbol de componentes donde se necesita el contexto.

Comments are closed.