docs(ConfigProvider): fix how to override basic css variables (#11434)

* docs(ConfigProvider): fix how to override basic css variables

* docs(ConfigProvider): add notes about two `:root` selectors

packages/vant-cli/site/common/style/highlight.less

@@ -15,6 +15,13 @@ code {
   border-radius: var(--van-doc-border-radius);
 }
 
+p {
+  code {
+    display: inline-flex;
+    padding: 4px 10px;
+  }
+}
+
 pre {
   margin: 20px 0 0;
 

packages/vant/src/config-provider/README.md

@@ -97,11 +97,15 @@ You can directly override these CSS variables in the code, and the style of the
 
 ```css
 /* the Primary Button will turn red */
-:root {
+:root:root {
   --van-button-primary-background: red;
 }
 ```
 
+> Note: Why write two duplicate `:root`?
+>
+> Since the theme variables in vant are also declared under `:root`, in some cases they cannot be successfully overwritten due to priority issues. Through `:root:root` you can explicitly make the content you write a higher priority to ensure the successful coverage of the theme variables.
+
 #### Override by ConfigProvider
 
 The `ConfigProvider` component provides the ability to override CSS variables. You need to wrap a `ConfigProvider` component at the root node and configure some CSS variables through the `theme-vars` property.

packages/vant/src/config-provider/README.zh-CN.md

@@ -95,11 +95,15 @@ Vant 组件通过丰富的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs
 
 ```css
 /* 添加这段样式后，Primary Button 会变成红色 */
-:root {
+:root:root {
   --van-button-primary-background: red;
 }
 ```
 
+> 注意：为什么要写两个重复的 `:root`？
+>
+> 由于 vant 中的主题变量也是在 `:root` 下声明的，所以在有些情况下会由于优先级的问题无法成功覆盖。通过 `:root:root` 可以显式地让你所写内容的优先级更高一些，从而确保主题变量的成功覆盖。
+
 #### 通过 ConfigProvider 覆盖
 
 `ConfigProvider` 组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个 `ConfigProvider` 组件，并通过 `theme-vars` 属性来配置一些主题变量。