- "value": "\nUm marcador `<style module>` é compilado como [Módulos de CSS](https://github.com/css-modules/css-modules) e expõe as classes de CSS resultantes ao componente como um objeto sob a chave de `$style`:\n\n```vue\n<template>\n <p :class=\"$style.red\">This should be red</p>\n</template>\n\n<style module>\n.red {\n color: red;\n}\n</style>\n```\n\nAs classes resultantes têm o seu nome gerados com caracteres embaralhados para evitar colisões, alcançando o mesmo efeito de isolar o CSS apenas ao componente atual.\n\nConsulte a [especificação dos Módulos de CSS](https://github.com/css-modules/css-modules) por mais detalhes, tais como [exceções globais](https://github.com/css-modules/css-modules#exceptions) e [composição](https://github.com/css-modules/css-modules#composition).\n\n### Nome de Injeção Personalizado \n\nNós podemos personalizar a chave da propriedade do objeto de classes injetadas dando ao atributo `module` um valor:\n\n```vue\n<template>\n <p :class=\"classes.red\">red</p>\n</template>\n\n<style module=\"classes\">\n.red {\n color: red;\n}\n</style>\n```\n\n### Uso com API de Composição \n\nAs classes injetadas podem ser acessadas na `setup()` e no `<script setup>` através da API `useCssModule`. Para os blocos `<style module>` com nomes de injeção personalizados, `useCssModule` aceita o valor do atributo `module` correspondente como primeiro argumento:\n\n```js\nimport { useCssModule } from 'vue'\n\n// dentro do âmbito de setup()...\n// padrão, retorna as classes do marcador `<style module>`\nuseCssModule()\n\n// personalizado, retorna as classes do marcador `<style module=\"classes\">`\nuseCssModule('classes')\n```\n"
0 commit comments