`)\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.7063452,{"description":2879,"labels":2880,"number":2885,"owner":2871,"repository":2872,"state":2873,"title":2886,"updated_at":2887,"url":2888,"score":2889},"### Describe the bug\n\nhttps://github.com/vuejs/vitepress/pull/3359 makes it so that there are two separate headers now (`VPNav` and `VPLocalNav`), which make it impossible to apply single style for header, such as blur effect. Even if I remove the divider and border, it'll look as follow:\r\n\r\n\n\n### Reproduction\n\nAdd blur filter to `VPNav` and `VPLocalNav` and remove borders.\n\n### Expected behavior\n\nBoth headers should be wrapped under single element (eg, `\u003Cheader>`).\n\n### System Info\n\n```Text\n-\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.",[2881,2884],{"name":2882,"color":2883},"theme","0754FB",{"name":2868,"color":2869},3393,"New local navbar design breaks ubiquitous header styling","2024-03-07T11:19:13Z","https://github.com/vuejs/vitepress/issues/3393",0.71196747,{"description":2891,"labels":2892,"number":2894,"owner":2871,"repository":2872,"state":2873,"title":2895,"updated_at":2896,"url":2897,"score":2898},"### Is your feature request related to a problem? Please describe.\r\n\r\nI want to use UnoCSS in a VitePress project, just like what [unocss.dev](https://unocss.dev) does. However, simply copying their config cannot bring UnoCSS to the whole site.\r\n\r\nIn this [minimal demo on StackBlitz](https://stackblitz.com/edit/vitepress-unocss), there are 3 UnoCSS injections:\r\n- [x] In Markdown content, any UnoCSS element keeps their format but without style\r\n- [ ] In the hero of `index.md`, the element turns into a string\r\n- [x] Only in the feature cards, element and styles exists so the icon shows\r\n- [ ] Other cases haven't been checked\r\n\r\n### Describe the solution you'd like\r\n\r\nProvide some guide to allow UnoCSS injection, it may be better if there is a plugin to do that.\r\n\r\n### Describe alternatives you've considered\r\n\r\nBoth VitePress and UnoCSS are powered by Vite, if UnoCSS can be integrated into VitePress, it may bring a more customizable style with little cost.\r\n\r\n~~I don't know if it's better to request this feature after UnoCSS reaches v1.0, or request it on UnoCSS for now.~~\r\n\r\n### Additional context\r\n\r\n- [UnoCSS docs source](https://github.com/unocss/unocss/tree/main/docs)\r\n- [Guide of integrating UnoCSS into Vite](https://unocss.dev/integrations/vite)\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.",[2893],{"name":2868,"color":2869},2424,"Feature request: support UnoCSS generally","2023-08-03T10:15:33Z","https://github.com/vuejs/vitepress/issues/2424",0.7168603,{"description":2900,"labels":2901,"number":2902,"owner":2871,"repository":2872,"state":2903,"title":2904,"updated_at":2905,"url":2906,"score":2907},"### 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,"closed","Default theme: Add class to opt out of .vp-doc styles","2025-05-04T08:39:09Z","https://github.com/vuejs/vitepress/issues/4731",0.64614934,{"description":2909,"labels":2910,"number":2911,"owner":2871,"repository":2872,"state":2903,"title":2912,"updated_at":2913,"url":2914,"score":2915},"### Is your feature request related to a problem? Please describe.\r\n\r\nI use Vitepress to document my component library. Sometimes, the style of the components is \"overridden\" by the Vitepress CSS, or just applied.\r\n\r\nFor example, with a component using a `\u003Ctable />` HTMLElement (https://maz-ui.com/components/maz-table), the VitePress CSS is applied to my component and changes its style. **I don't want it.** \r\n\r\n[See CSS file here](https://github.com/vuejs/vitepress/blob/df8753bd927c2b57b9188fb292c1429e9c3c8ab6/src/client/theme-default/styles/components/vp-doc.css#L176)\r\n\r\n```css\r\n.vp-doc table {\r\n display: block;\r\n border-collapse: collapse;\r\n margin: 20px 0;\r\n overflow-x: auto;\r\n}\r\n\r\n.vp-doc tr {\r\n background-color: var(--vp-c-bg);\r\n border-top: 1px solid var(--vp-c-divider);\r\n transition: background-color 0.5s;\r\n}\r\n\r\n.vp-doc tr:nth-child(2n) {\r\n background-color: var(--vp-c-bg-soft);\r\n}\r\n\r\n.vp-doc th,\r\n.vp-doc td {\r\n border: 1px solid var(--vp-c-divider);\r\n padding: 8px 16px;\r\n}\r\n\r\n.vp-doc th {\r\n text-align: left;\r\n font-size: 14px;\r\n font-weight: 600;\r\n color: var(--vp-c-text-2);\r\n background-color: var(--vp-c-bg-soft);\r\n}\r\n\r\n.vp-doc td {\r\n font-size: 14px;\r\n}\r\n```\r\n\r\n### Describe the solution you'd like\r\n\r\nI don't want the style to be applied to selected elements.\r\n\r\n### Describe alternatives you've considered\r\n\r\nAs the [tailwindcss-typography](https://github.com/tailwindlabs/tailwindcss-typography) library suggests [here](https://github.com/tailwindlabs/tailwindcss-typography?tab=readme-ov-file#advanced-topics) with the class `not-prose`. \r\n\r\nI propose to add a class like `no-vp-style` or something else to not apply CSS to the HTML element where the class is set and other DOM inside.\r\n\r\n```md\r\n## Documentation\r\n\r\n\u003CMazTable class=\"no-vp-style\" />\r\n```\r\n\r\nWith a CSS rule like : \r\n\r\n```css\r\n.vp-doc table:not(:where([class~='no-vp-style'], [class~='no-vp-style'] *)) {\r\n ...\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] 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.",[],3652,"Add CSS class to disable vitepress CSS to avoid conflicts and override","2024-03-21T00:04:41Z","https://github.com/vuejs/vitepress/issues/3652",0.64898515,{"description":2917,"labels":2918,"number":2922,"owner":2871,"repository":2872,"state":2903,"title":2923,"updated_at":2924,"url":2925,"score":2926},"### 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.",[2919],{"name":2920,"color":2921},"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.6718517,{"description":2928,"labels":2929,"number":2931,"owner":2871,"repository":2872,"state":2903,"title":2932,"updated_at":2933,"url":2934,"score":2935},"### 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.",[2930],{"name":2920,"color":2921},3523,"How to remove .vp-doc table style","2024-02-09T00:04:26Z","https://github.com/vuejs/vitepress/issues/3523",0.6737488,{"description":2937,"labels":2938,"number":2939,"owner":2871,"repository":2872,"state":2903,"title":2940,"updated_at":2941,"url":2942,"score":2943},"### 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,"How to disable all styles for a .vp-doc table","2024-11-04T04:43:46Z","https://github.com/vuejs/vitepress/issues/4309",0.6763797,{"description":2945,"labels":2946,"number":2947,"owner":2871,"repository":2872,"state":2903,"title":2948,"updated_at":2949,"url":2950,"score":2951},"### 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.68906176,{"description":2953,"labels":2954,"number":2955,"owner":2871,"repository":2872,"state":2903,"title":2956,"updated_at":2957,"url":2958,"score":2959},"**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.7046812,["Reactive",2961],{},["Set"],["ShallowReactive",2964],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fXxXEdS-uVG41sw2Fofef0y8DGOpwlJlIkZPnbQzp2ao":-1},"/vuejs/vitepress/808"]