fix: revert unuse style change

src/components/ApiHeader/index.tsx

@@ -85,7 +85,7 @@ export const ApiHeader = memo<ApiTitleProps>(
     serviceList = [],
   }) => {
     const { mobile } = useResponsive();
-    const { styles } = useStyles({ mobile });
+    const { styles } = useStyles();
     const isDoc = type === 'doc';
 
     const items = [

src/components/ApiHeader/style.ts

@@ -1,23 +1,21 @@
 import { createStyles } from 'antd-style';
 
-export const useStyles = createStyles(
-  ({ css, token, stylish }, { mobile }: { mobile?: boolean }) => ({
-    desc: css`
-      font-size: ${token.fontSizeLG}px;
-      line-height: ${token.lineHeightLG}px;
-    `,
-    label: css`
-      width: 80px;
-    `,
-    meta: css``,
-    text: css`
-      ${stylish.resetLinkColor}
-    `,
-    title: css`
-      ${mobile} {
-        margin-block: 0;
-        font-size: 32px !important;
-      }
-    `,
-  })
-);
+export const useStyles = createStyles(({ css, token, responsive: r, stylish }) => ({
+  desc: css`
+    font-size: ${token.fontSizeLG}px;
+    line-height: ${token.lineHeightLG}px;
+  `,
+  label: css`
+    width: 80px;
+  `,
+  meta: css``,
+  text: css`
+    ${stylish.resetLinkColor}
+  `,
+  title: css`
+    ${r.mobile} {
+      margin-block: 0;
+      font-size: 32px !important;
+    }
+  `,
+}));

src/slots/Content/index.tsx

@@ -14,10 +14,7 @@ const Content = memo<DivProps>(({ children, ...props }) => {
   const loading = useSiteStore(s => s.siteData.loading);
   const { docStyle } = useSiteStore(themeConfig, isEqual);
   const { mobile } = useResponsive();
-  const { styles, cx } = useStyles({
-    isPure: docStyle === 'pure',
-    mobile,
-  });
+  const { styles, cx } = useStyles(docStyle === 'pure');
 
   useEffect(() => {
     document.body.scrollTo(0, 0);

src/slots/Content/style.ts

@@ -1,29 +1,27 @@
 import { createStyles } from 'antd-style';
 
-export const useStyles = createStyles(
-  ({ cx, token, css }, { isPure, mobile }: { isPure: boolean; mobile?: boolean }) => ({
-    content: cx(
-      !isPure &&
-        css`
-          padding: 24px 48px;
-          background-color: ${token.colorBgContainer};
-          border-radius: 10px;
-
-          ${mobile} {
-            padding: 8px 16px;
-            border-radius: 0;
-          }
-        `,
+export const useStyles = createStyles(({ cx, token, responsive, css }, isPure: boolean) => ({
+  content: cx(
+    !isPure &&
       css`
-        flex: 1;
-        box-sizing: border-box;
-        width: 100%;
-        min-height: 400px;
+        padding: 24px 48px;
+        background-color: ${token.colorBgContainer};
+        border-radius: 10px;
 
-        &:has([data-page-tabs='true']) {
-          padding-top: 8px;
+        ${responsive.mobile} {
+          padding: 8px 16px;
+          border-radius: 0;
         }
-      `
-    ),
-  })
-);
+      `,
+    css`
+      flex: 1;
+      box-sizing: border-box;
+      width: 100%;
+      min-height: 400px;
+
+      &:has([data-page-tabs='true']) {
+        padding-top: 8px;
+      }
+    `
+  ),
+}));

src/slots/Footer/index.tsx

@@ -16,7 +16,7 @@ const Footer = memo(() => {
   const { footerConfig, footer } = themeConfig;
   const githubUrl = useSiteStore(githubSel, shallow);
   const { mobile } = useResponsive();
-  const { styles, theme } = useStyles({ mobile });
+  const { styles, theme } = useStyles();
 
   if (!footer) return;
 

src/slots/Footer/style.ts

@@ -1,6 +1,6 @@
 import { createStyles } from 'antd-style';
 
-export const useStyles = createStyles(({ css, token }, { mobile }: { mobile?: boolean }) => {
+export const useStyles = createStyles(({ css, responsive, token }) => {
   const prefix = `rc-footer`;
 
   return {
@@ -13,7 +13,7 @@ export const useStyles = createStyles(({ css, token }, { mobile }: { mobile?: bo
 
       border-top: 1px solid ${token.colorSplit};
 
-      ${mobile} {
+      ${responsive.mobile} {
         flex-direction: column;
         border: none;
       }
@@ -144,7 +144,7 @@ export const useStyles = createStyles(({ css, token }, { mobile }: { mobile?: bo
         }
       }
 
-      ${mobile} {
+      ${responsive.mobile} {
         .${prefix} {
           text-align: center;
 

src/slots/Logo/index.tsx

@@ -14,7 +14,7 @@ const Logo = memo(() => {
   const config = useSiteStore(themeConfig, isEqual);
   const locale = useSiteStore(s => s.locale, isEqual);
   const { mobile } = useResponsive();
-  const { styles, cx } = useStyles({ mobile });
+  const { styles, cx } = useStyles();
 
   return (
     config && (

src/slots/Logo/style.ts

@@ -1,7 +1,7 @@
 import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(
-  ({ css, token }, { mobile }: { mobile?: boolean }) => css`
+  ({ css, responsive, token }) => css`
     display: inline-flex;
     align-items: center;
 
@@ -11,7 +11,7 @@ export const useStyles = createStyles(
     color: ${token.colorText};
     text-decoration: none;
 
-    ${mobile} {
+    ${responsive.mobile} {
       font-size: 18px;
     }
   `

src/slots/Navbar/index.tsx

@@ -6,45 +6,41 @@ import { ExternalLink } from 'lucide-react';
 import { memo } from 'react';
 import { shallow } from 'zustand/shallow';
 
-import { useResponsive } from '@/hooks/useResponsive';
 import { useSiteStore } from '@/store';
 import { isExternalLinks } from '@/utils';
 
-const useStyles = createStyles(
-  ({ css, stylish, token, prefixCls }, { mobile }: { mobile?: boolean }) => {
-    return {
-      link: css`
-        ${stylish.resetLinkColor}
-        display: inline-flex;
-        align-items: center;
+const useStyles = createStyles(({ css, stylish, token, responsive, prefixCls }) => {
+  return {
+    link: css`
+      ${stylish.resetLinkColor}
+      display: inline-flex;
+      align-items: center;
 
-        & > .lint-text {
-          ${stylish.resetLinkColor}
-        }
+      & > .lint-text {
+        ${stylish.resetLinkColor}
+      }
 
-        & > .anticon {
-          margin-left: ${token.marginXS}px;
-          font-size: ${token.fontSizeSM}px;
-          color: ${token.colorTextTertiary};
-        }
-      `,
-      tabs: css`
-        .${prefixCls}-tabs-tab-active a {
-          color: ${token.colorText} !important;
-        }
-        ${mobile} {
-          display: none;
-        }
-      `,
-    };
-  }
-);
+      & > .anticon {
+        margin-left: ${token.marginXS}px;
+        font-size: ${token.fontSizeSM}px;
+        color: ${token.colorTextTertiary};
+      }
+    `,
+    tabs: css`
+      .${prefixCls}-tabs-tab-active a {
+        color: ${token.colorText} !important;
+      }
+      ${responsive.mobile} {
+        display: none;
+      }
+    `,
+  };
+});
 
 const linkToKey = (path?: string) => (path ?? '').split('/').slice(0, 2).join('/');
 
 const Navbar = memo(() => {
-  const { mobile } = useResponsive();
-  const { styles } = useStyles({ mobile });
+  const { styles } = useStyles();
   const { pathname } = useLocation();
 
   const nav = useSiteStore(s => s.navData, shallow);

src/slots/SearchBar/index.tsx

@@ -8,7 +8,7 @@ import { useStyles } from './style';
 
 const SearchBar = memo(() => {
   const { mobile } = useResponsive();
-  const { styles } = useStyles({ mobile });
+  const { styles } = useStyles();
   const [focusing, setFocusing] = useState(false);
   const { keywords, setKeywords, result, loading } = useSiteSearch();
   const intl = useIntl();

src/slots/SearchBar/style.ts

@@ -1,12 +1,12 @@
 import { createStyles } from 'antd-style';
 
-export const useStyles = createStyles(({ token, css, cx }, { mobile }: { mobile?: boolean }) => {
+export const useStyles = createStyles(({ token, responsive, css, cx }) => {
   return {
     container: css`
       position: relative;
 
       // TODO: support search for mobile devices
-      ${mobile} {
+      ${responsive.mobile} {
         display: none;
       }
     `,
@@ -121,7 +121,7 @@ export const useStyles = createStyles(({ token, css, cx }, { mobile }: { mobile?
 
         transition: all 0.3s;
 
-        ${mobile} {
+        ${responsive.mobile} {
           display: none;
         }
       `