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.

Styled Components con nombres de clase más legibles.

05 Aug, 2023 Programación

Creé algunos componentes utilizando styled components y su salida genera un nombre de clase cifrado que dificulta la depuración.

const StyledMessageBlock = styled.div`
  display: flex;
  font-weight: 200;
  height: 25px;
`;

enter image description here

Entonces, intenté importar styled desde macros import styled from 'styled-components/macro'; y el resultado sigue siendo el mismo.

Luego intenté actualizar el archivo .babelrc con algunas configuraciones pero tampoco funcionó.

"plugins": [
    ["babel-plugin-macros"],
    [
        "babel-plugin-styled-components",
        {
            "minify": true,
            "transpileTemplateLiterals": false,
            "pure": true,
            "displayName": true, // generar otro nombre de clase
            "fileName": true, // generar otro nombre de clase
            "preprocess": false,
            "meaninglessFileNames": ["index", "styles"]
        }
    ]
]

No estoy seguro de qué me está faltando aquí. El resultado esperado sería un nombre de clase como sc_StyledMessageBlock_bdvvtL.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Una posible solución para facilitar la depuración al usar componentes estilizados es incluir la opción displayName al definir el componente estilizado. Esto generará un nombre de clase que incluye el nombre del componente, lo que facilitará distinguir entre diferentes componentes al inspeccionar el elemento en las herramientas de desarrollo del navegador.

    Por ejemplo:

    const StyledMessageBlock = styled.div`
  display: flex;
  font-weight: 200;
  height: 25px;
`;

StyledMessageBlock.displayName = 'StyledMessageBlock';

    Esto generará un nombre de clase como StyledMessageBlock-sc-abcdef1234 (donde abcdef1234 es un hash único para esta instancia del componente), que incluye el nombre del componente y el prefijo “sc” que indica que es un componente estilizado.

    Otra opción es utilizar el complemento babel-plugin-styled-components con las opciones displayName y fileName especificadas. Esto también incluirá el nombre del componente en el nombre de clase generado y además incluirá el nombre del archivo en el nombre de clase.

    Por ejemplo, con la siguiente configuración en .babelrc:

    "plugins": [
  "babel-plugin-styled-components",
  {
    "displayName": true,
    "fileName": true
  }
]

    El componente StyledMessageBlock mencionado anteriormente generará un nombre de clase como src-components-StyledMessageBlock-StyledMessageBlock__bdvvtL, donde src-components es la ruta del archivo, StyledMessageBlock es el nombre del componente y bdvvtL es el hash.

Comments are closed.