`)\r\n\r\nI'm currently working on migrating and documenting the excellent Spectre CSS docs and am using Vitepress.\r\n\r\nI'm developing an ejected and modified default theme which has already come some way to solving this problem:\r\n\r\n- [original](https://picturepan2.github.io/spectre/components/menu.html) (custom app)\r\n- [migrated](https://spectre-org.github.io/spectre-docs/docs/components/menu.html) (VitePress with modified default theme)\r\n - note the `vp-doc` formatting which is all Spectre CSS\r\n - some fixed, and some not-yet fixed clashes of general class names\r\n\r\nFor reference to the use case (documenting a 3rd-party framework) here is the raw markdown page:\r\n\r\n- https://raw.githubusercontent.com/spectre-org/spectre-docs/main/docs/components/menu.md\r\n\r\nNote that:\r\n\r\n- Spectre CSS (or any other 3rd-party CSS framework) is now able to be simply \"dropped in\"\r\n- there is no pollution between VitePress and the 3rd-party framework\r\n- VitePress' default components remain fully-styled and work as they were before\r\n- `vp-doc` content can be safely used to demo any 3rd party HTML elements and classes\r\n\r\nI think I know enough to fix the problems in my modified theme and either:\r\n\r\n- publish a new \"neutral\" theme\r\n- port the changes to the default theme (ideal outcome)\r\n\r\nThere's actually not that much work; it's:\r\n\r\n- renaming the general component classes\r\n- moving some `vp-doc` classes to other locations\r\n- creating an additional unstyled entrypoint such as `without-formatting`\r\n\r\n### Describe alternatives you've considered\r\n\r\nPublishing the modified theme standalone, but then of course it would not benefit from ongoing updates.\r\n\r\n### Additional context\r\n\r\nI am proposing a PR in the coming weeks to integrate these updates.\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.dev).\r\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\r\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[2867],{"name":2868,"color":2869},"stale","ededed",3021,"vuejs","vitepress","open","Make the default theme compatible with 3rd-party CSS frameworks","2023-11-06T14:43:58Z","https://github.com/vuejs/vitepress/issues/3021",0.6558691,{"description":2879,"labels":2880,"number":2881,"owner":2871,"repository":2872,"state":2882,"title":2883,"updated_at":2884,"url":2885,"score":2886},"### Describe the bug\n\n\r\n\r\nMy component style is the red box on the left, and the blue box on the right is the default of vitepress, which causes the style of my component to be overwritten. How can I configure the table style without using vitepress and use the style of my component?\r\n\r\n我的组件样式是左侧红框的,右侧蓝框是 vitepress 默认的,导致覆盖了我组件的样式,我怎么才能配置不使用 vitepress 的 table 样式,用我组件的样式\n\n### Reproduction\n\nNone\n\n### Expected behavior\n\nNone\n\n### System Info\n\n```Text\nNone\n```\n\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.dev).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[],4309,"closed","How to disable all styles for a .vp-doc table","2024-11-04T04:43:46Z","https://github.com/vuejs/vitepress/issues/4309",0.6154687,{"description":2888,"labels":2889,"number":2893,"owner":2871,"repository":2872,"state":2882,"title":2894,"updated_at":2895,"url":2896,"score":2897},"### Is your feature request related to a problem? Please describe.\n\nI am rendering components in `.vp-doc` and my component's h2 gets style of VitePress which I don't want.\n\n### Describe the solution you'd like\n\nAdd class `not-vp-doc` to omit applying styles\n\n### Describe alternatives you've considered\n\nnone\n\n### Additional context\n\nI checked the source and found that all styles are written in CSS and it isn't quick to apply the `:not()` selector because there's list of `vp-doc` class usage and I might break something in hurry.\r\n\r\nI am in hurry hence creating this issue instead of PR.\r\n\r\nWill the team going to use SCSS in favor or refactor?\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.vuejs.org).\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[2890],{"name":2891,"color":2892},"duplicate","cfd3d7",808,"Allow excluding styles for tags like h2 in `vp-doc`","2023-01-21T14:34:01Z","https://github.com/vuejs/vitepress/issues/808",0.6459883,{"description":2899,"labels":2900,"number":2904,"owner":2871,"repository":2872,"state":2882,"title":2905,"updated_at":2906,"url":2907,"score":2908},"### Describe the bug\n\nWhen I customize a link component and introduce it into vitepress, the `vp-doc` class generates a style override on my custom style, causing my style to not display properly:\r\n\r\nI've tried `vp-raw` for style isolation, but it still doesn't display my custom styles properly\r\n\r\nI don't know how to solve this style override problem, which has been bothering me for a long time\n\n### Reproduction\n\nThis is my custom link component:\r\n```tsx\r\nimport { defineComponent, PropType, ref } from \"vue\";\r\nimport \"uno.css\";\r\n\r\nexport type IType = 'default' | 'primary' | 'success' | 'warning' | 'danger'| 'info'\r\nexport type IColor = 'black' | 'blue' | 'green' | 'yellow'| 'red' | 'gray'\r\nexport const props = {\r\n type: {\r\n type: String as PropType\u003CIType>,\r\n default: \"default\",\r\n },\r\n color: {\r\n type: String as PropType\u003CIColor>,\r\n default: \"black\",\r\n },\r\n plain: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n href: {\r\n type: String,\r\n required: true,\r\n },\r\n} as const;\r\n\r\nexport default defineComponent({\r\n name: \"CLink\",\r\n props,\r\n setup(props, { slots }) {\r\n return () => (\r\n \u003Ca\r\n class={`\r\n text-${props.plain ? props.color + \"-500\" : \"white\"}\r\n hover:text-${props.color}-400\r\n cursor-pointer\r\n text-lg\r\n hover:text-white\r\n transition duration-300 ease-in-out transform hover:scale-105\r\n mx-1\r\n decoration-none\r\n `}\r\n href={props.href} \r\n >\r\n {slots.default ? slots.default() : 'Link'}\r\n \u003C/a>\r\n ); \r\n },\r\n});\r\n```\r\n\r\nHere's my demo code from the documentation:\r\n```vue\r\n\u003Cdiv class=\"vp-raw\">\r\n \u003CCLink href=\"#\" class=\"primary\" color=\"blue\">Primary Link\u003C/CLink>\r\n \u003CCLink href=\"#\" type=\"success\" color=\"green\">Success Link\u003C/CLink>\r\n \u003CCLink href=\"#\" type=\"warning\" color=\"yellow\">Warning Link\u003C/CLink>\r\n \u003CCLink href=\"#\" type=\"danger\" color=\"red\">Danger Link\u003C/CLink>\r\n \u003CCLink href=\"#\" type=\"info\" color=\"gray\">Info Link\u003C/CLink>\r\n\u003C/div>\r\n```\r\n\r\n\r\n\n\n### Expected behavior\n\nI want to be able to display the style of my components properly, in fact I can be sure that the `vp-doc` generated style override, I delete this class by manipulating the DOM and then the style can be displayed normally, but this will make the other functions of vitepress failure, I want to be able to display the style of the component without affecting vitepress\n\n### System Info\n\n```shell\n{\r\n \"name\": \"catisol-ui\",\r\n \"version\": \"0.9.1\",\r\n \"description\": \"\",\r\n \"main\": \"index.js\",\r\n \"scripts\": {\r\n \"test\": \"vitest\",\r\n \"build\": \"vite build\",\r\n \"dev\": \"vite\",\r\n \"docs:dev\": \"vitepress dev docs\",\r\n \"docs:build\": \"vitepress build docs\",\r\n \"docs:serve\": \"vitepress serve docs\"\r\n },\r\n \"keywords\": [],\r\n \"author\": \"\",\r\n \"license\": \"ISC\",\r\n \"devDependencies\": {\r\n \"@iconify-json/ic\": \"1.1.4\",\r\n \"@vitejs/plugin-vue\": \"3.0.3\",\r\n \"@vitejs/plugin-vue-jsx\": \"2.0.0\",\r\n \"@vue/test-utils\": \"2.0.2\",\r\n \"happy-dom\": \"6.0.4\",\r\n \"postcss\": \"^8.4.21\",\r\n \"postcss-prefix-selector\": \"^1.16.0\",\r\n \"unocss\": \"0.45.6\",\r\n \"vite\": \"3.0.7\",\r\n \"vitepress\": \"v1.0.0-alpha.31\",\r\n \"vitest\": \"0.21.1\"\r\n },\r\n \"maintainers\": [\r\n \"isolcat\"\r\n ],\r\n \"dependencies\": {\r\n \"@unocss/vite\": \"^0.45.13\",\r\n \"vue\": \"3.2.37\"\r\n }\r\n}\n```\n\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.vuejs.org).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2901],{"name":2902,"color":2903},"need more info","bdbefc",1777,"vp-raw cannot isolate style conflicts generated by v-doc classes","2023-01-21T14:16:44Z","https://github.com/vuejs/vitepress/issues/1777",0.654661,{"description":2910,"labels":2911,"number":2912,"owner":2871,"repository":2872,"state":2882,"title":2913,"updated_at":2914,"url":2915,"score":2916},"**Is your feature request related to a problem? Please describe.**\r\nCurrently, importing Vue components (whether they are VitePress components, or components from a library for example) are influenced by VitePress's somewhat sub-optimal styles.\r\n\r\nFor example, all headings are styled, so as soon as a component uses an `h1`/`h2`/etc, it will inherit those styles, making VitePress virtually unusable for component libraries that ship their own CSS.\r\n\r\nThe only I can think of mitigating this, is to use a web component as a base for Vue components to be mounted in, as styles are local to web components if I remember correctly.\r\n\r\n**Describe the solution you'd like**\r\nSome way to render components with their own styles, and not inherit styles from the docs.\r\n\r\n**Describe alternatives you've considered**\r\nI tries unsetting all styles `* { all: unset; }` inside our demo component (the wrapper for all other components), but that also removes some of the Tailwind related styling unfortunately.\r\n\r\nI couldn't get web components to work, as the vue plugin seems to be for Vue 2 (https://github.com/vuejs/vue-web-component-wrapper).",[],248,"[Feature] - Allow local styling of components","2023-01-21T16:04:20Z","https://github.com/vuejs/vitepress/issues/248",0.6752274,{"description":2918,"labels":2919,"number":2921,"owner":2871,"repository":2872,"state":2882,"title":2922,"updated_at":2923,"url":2924,"score":2925},"### Describe the bug\r\n\r\nMy vue component contains table element(ant-design-vue table), when I use it in doc file, table style is overwrited by vp-doc class and looks strange(and with some other built-in style like vp-doc th).Can this be removed?Otherwise I should manually overwrite again.\r\n\r\n\r\n\r\n### Reproduction\r\n\r\n[stackblitz](https://stackblitz.com/edit/vite-bjmwuo?file=docs%2F.vitepress%2Ftheme%2Findex.ts)\r\n\r\n### Expected behavior\r\n\r\nconfig to remove vp-doc table style\r\n\r\n### System Info\r\n\r\n```Text\r\n\"vitepress\": \"^1.0.0-rc.39\"\r\nSystem macOS 14.2.1 (23C71)\r\nBrowser Chrome 120.x\r\n```\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Validations\r\n\r\n- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.dev).\r\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2920],{"name":2902,"color":2903},3523,"How to remove .vp-doc table style","2024-02-09T00:04:26Z","https://github.com/vuejs/vitepress/issues/3523",0.67550683,{"description":2927,"labels":2928,"number":2929,"owner":2871,"repository":2872,"state":2882,"title":2930,"updated_at":2931,"url":2932,"score":2933},"### Is your feature request related to a problem? Please describe.\n\nWe're using Custom Elements to encapsulate styles from our design system, so it'd be great to be able to tell Vitepress to ignore those tags.\r\n\r\nSuper lightweight example:\r\n\r\n```js\r\nclass ButtonExample extends HTMLElement {\r\n connectedCallback() {\r\n const designSystemCSS = '\u003Clink rel=\"stylesheet\" type=\"text/css\" href=\"designSystemURL\" />'\r\n const target = `\u003Cdiv id=\"app\">\u003C/div>`\r\n this.shadow = this.attachShadow({ mode: 'open' })\r\n this.shadow.innerHTML = designSystemCSS + target\r\n createApp(App) // App defined elsewhere ofc\r\n .mount(this.shadow.querySelector('#app'))\r\n }\r\n}\r\n```\n\n### Describe the solution you'd like\n\nProbably just being able to set `compilerOptions.isCustomElement` somewhere would be good enough?\n\n### Describe alternatives you've considered\n\n_No response_\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.vuejs.org).\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[],735,"Custom element support","2023-01-21T14:34:18Z","https://github.com/vuejs/vitepress/issues/735",0.68323916,{"description":2935,"labels":2936,"number":2937,"owner":2871,"repository":2872,"state":2882,"title":2938,"updated_at":2939,"url":2940,"score":2941},"### Is your feature request related to a problem? Please describe.\n\nWhen adding Vue components or HTML markup inside a `doc` or `page` markdown file, it's frustrating to have to contend with the global `.vp-doc` styles.\n\n### Describe the solution you'd like\n\nIt would be very nice to have a `.not-vp-doc` class to negate and opt out of the global `.vp-doc` styles (for the element where you apply `.not-vp-doc` and all descendants) similar to the `.prose` and `.not-prose` classes used by [@tailwindcss/typography](https://github.com/tailwindlabs/tailwindcss-typography).\n\n### Describe alternatives you've considered\n\nI started creating my own override `vp-doc.css` stylesheet, but maintaining it and also getting it imported instead of the default one requires too much duplication files of the default theme.\n\nI also considered mechanisms to opt out of the `.vp-doc` styles at the theme level in `Layout.vue` but it really doesn't solve the problem - the opt-out needs to be able to happen on a specific fragment or component when embedded inside an `.md` file that otherwise consists primarily of markdown content.\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [x] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [x] Read the [docs](https://vitepress.dev).\n- [x] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [x] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[],4731,"Default theme: Add class to opt out of .vp-doc styles","2025-05-04T08:39:09Z","https://github.com/vuejs/vitepress/issues/4731",0.6889535,{"description":2943,"labels":2944,"number":2946,"owner":2871,"repository":2872,"state":2882,"title":2947,"updated_at":2948,"url":2949,"score":2950},"### Is your feature request related to a problem? Please describe.\r\n\r\nWhen I use Element-Plus in VitePress, the partial style of the component is modified. The reason is VitePress `src/client/theme-default/styles/layout.css` File reset all styles.\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n### Describe the solution you'd like\r\n\r\nI hope this code only takes effect in VitePress.\r\n\r\n### Describe alternatives you've considered\r\n\r\n_No response_\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/coc)\r\n- [X] Read the [docs](https://vitepress.vuejs.org/).\r\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/master/.github/contributing.md).\r\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2945],{"name":2891,"color":2892},434,"This is a suggestion","2023-01-21T16:04:15Z","https://github.com/vuejs/vitepress/issues/434",0.68923575,{"description":2952,"labels":2953,"number":2955,"owner":2871,"repository":2872,"state":2882,"title":2956,"updated_at":2957,"url":2958,"score":2959},"### Is your feature request related to a problem? Please describe.\n\nwhen i have a vue sfc component, and i have \r\n\u003Ctemplate>\u003Cdiv class=\"$style.myStyle\"/>\r\n\u003Cstyle module>\r\n.my-style { background: blue;}\r\n\u003C/style>\r\n\r\nand i am using the component, it does not render the 'blue' background. if you investigate what $stlye is when you mount the component it has $style={my-style: my-style_fingerprint}\r\n\r\nThis appears to be because i can not set the css.module options on the vite config.\r\n\n\n### Describe the solution you'd like\n\ncould you pass through https://vitejs.dev/config/shared-options.html#css-modules to the vite config. I just need to set the localsConvention to camelcase\n\n### Describe alternatives you've considered\n\ni would have to change my code so that all my references to $style is not camelcase. I have thousands of references to different css classes, so it would be a real pain to get it to work correctly\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.vuejs.org).\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[2954],{"name":2902,"color":2903},2026,"Pass css.modules to vite app","2023-03-11T00:04:09Z","https://github.com/vuejs/vitepress/issues/2026",0.69913536,["Reactive",2961],{},["Set"],["ShallowReactive",2964],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fImbpPx2gxT8CVhyTBW1ALj6O4aUT64wrNxuNnCFnntA":-1},"/vuejs/vitepress/3652"]