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.

¿Puedo usar props en un componente estilizado escrito con esta sintaxis?

12 Jul, 2023 Programación

Hay este ejemplo de cómo crear un componente deslizador personalizado usando material ui en react. La definición del componente estilizado es la siguiente:

const PrettoSlider = styled((props) => <slider {...props}=""></slider>)({
  height: 8,
  "& .MuiSlider-track": {
    color: "red",
  },
  ... (algunas propiedades de estilo adicionales) ...
});

Luego, este componente se utiliza de la siguiente manera:

<prettoslider valuelabeldisplay="auto"></prettoslider>

Y esto funciona bien, sin embargo, ahora me gustaría cambiar los estilos del componente estilizado para múltiples instancias, como:

<prettoslider valuelabeldisplay="auto" color="red"></prettoslider>
<prettoslider valuelabeldisplay="auto" color="blue"></prettoslider>
<prettoslider valuelabeldisplay="auto" color="green"></prettoslider>

Cómo puedo pasar propiedades adicionales (“color” en este caso) para poder usarlo en las definiciones CSS estilizadas, es decir, reemplazando color: "red", para PrettoSlider con algo como color: props.color,? Lo intenté cambiando:

styled((props) => <slider {...props}=""></slider>)({

a:

styled((props) => <slider {...props}=""></slider>)((props) => {

Sin embargo, usando Typescript, indica que se esperaba el tipo “Theme” para “props”.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para pasar propiedades adicionales al componente estilizado y utilizarlas en las definiciones de CSS, debes modificar la definición del componente estilizado. En este caso, puedes reemplazar el valor del color codificado en duro por una referencia a la propiedad de color en el objeto de propiedades.

    Una forma de hacer esto es modificar la definición del componente estilizado para incluir la propiedad de color en las reglas de CSS. Esto se puede hacer utilizando una función que tome las propiedades como argumento y devuelva un objeto CSS con los estilos apropiados. Por ejemplo:

    const getPrettoSliderStyles = (props: { color: string }) => ({
  height: 8,
  "& .MuiSlider-track": {
    color: props.color,
  },
  // ...agrega estilos adicionales según sea necesario...
});

const PrettoSlider = styled((props) => <slider {...props}=""></slider>)(
  getPrettoSliderStyles
);

    Con esta modificación, ahora puedes pasar la propiedad de color a cada instancia del componente como una propiedad y se utilizará para generar las reglas de CSS. El error de tipificación que encontraste sugiere que necesitas especificar el tipo adecuado para el argumento de propiedades en la función styled. En este ejemplo, se espera que el argumento de propiedades sea un objeto con una propiedad de cadena de color, por lo que deberías usar un tipo que refleje eso, como:

    interface PrettoSliderProps {
  color: string;
  valueLabelDisplay: "on" | "off" | "auto";
  // ...agrega propiedades adicionales según sea necesario...
}

    Y luego utiliza este tipo al crear instancias del componente estilizado:

    const MyComponent = () => {
  return (
    <>
      <prettoslider color="red" valuelabeldisplay="auto"></prettoslider>
      <prettoslider color="blue" valuelabeldisplay="auto"></prettoslider>
      <prettoslider color="green" valuelabeldisplay="auto"></prettoslider>

  );
};

Comments are closed.