UIkit 的响应式网格在 React 中不生效是怎么回事？

Des.永莲提问于 2026-03-19 08:02:23 阅读 16

组件

我用 UIkit 做了一个简单的响应式布局，但在 React 项目里移动端根本不按预期堆叠，还是横着排。明明加了 uk-grid 和 uk-child-width-1-2@s 这些类，本地 HTML 文件测试是正常的，一放到 React 里就不行了。

是不是我哪里引入方式不对？或者 React 的渲染机制影响了 UIkit 的 CSS 生效？

import React from 'react';

export default function CardGrid() {
  return (
    <div className="uk-container">
      <div className="uk-grid uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid="">
        <div>Card 1</div>
        <div>Card 2</div>
        <div>Card 3</div>
      </div>
    </div>
  );
}

UIkit

我来解答赞 10 收藏

反馈

1 条解答

程序猿红霞 Lv1

这个问题很常见，不是你的引入方式有问题，而是 UIkit 的网格组件需要 JavaScript 初始化，而 React 的渲染机制和 UIkit 的自动初始化没有完美配合。

先说原因：UIkit 的 grid 组件（就是 uk-grid）本质上是一个 JS 组件，虽然它有一些基础 CSS 样式，但响应式行为（比如 @s 断点切换）需要 JS 初始化后才能正常工作。在普通 HTML 页面里，UIkit 会自动扫描并初始化，但 React 渲染的是虚拟 DOM，UIkit 可能没捕捉到。

解决办法有两个：

方法一：手动初始化（推荐）

在 React 组件里用 useEffect 强制让 UIkit 重新初始化：

import React, { useEffect } from 'react';

import 'uikit/dist/css/uikit.min.css';

import 'uikit/dist/js/uikit.min.js';



export default function CardGrid() {

  // 组件挂载后强制 UIkit 重新计算网格

  useEffect(() => {

    // 手动触发 grid 的重新初始化

    if (window.UIkit) {

      window.UIkit.grid(document.querySelector('[uk-grid]'));

    }

  }, []);



  return (

    <div className="uk-container">

      <div 

        className="uk-grid uk-child-width-1-2@s uk-child-width-1-3@m" 

        uk-grid=""

      >

        <div>Card 1</div>

        <div>Card 2</div>

        <div>Card 3</div>

      </div>

    </div>

  );

}

方法二：使用 MutationObserver 监听变化

如果你的网格内容会动态变化（比如从接口加载数据），上面那种方式可能不够，需要监听 DOM 变化：

import React, { useEffect, useRef } from 'react';

import 'uikit/dist/css/uikit.min.css';

import 'uikit/dist/js/uikit.min.js';



export default function CardGrid() {

  const gridRef = useRef(null);



  useEffect(() => {

    const element = gridRef.current;

    

    // 监听子元素变化，重新初始化

    if (window.UIkit && element) {

      const observer = new MutationObserver(() => {

        window.UIkit.grid(element);

      });

      

      observer.observe(element, { 

        childList: true, 

        subtree: true 

      });

      

      // 初始初始化

      window.UIkit.grid(element);

      

      return () => observer.disconnect();

    }

  }, []);



  return (

    <div className="uk-container">

      <div 

        ref={gridRef}

        className="uk-grid uk-child-width-1-2@s uk-child-width-1-3@m" 

        uk-grid=""

      >

        <div>Card 1</div>

        <div>Card 2</div>

        <div>Card 3</div>

      </div>

    </div>

  );

}

这里需要注意一点：确保你的 UIkit JS 文件确实被加载了。很多人在 React 项目里只引了 CSS 没引 JS，或者引入顺序不对（JS 必须在 CSS 之后）。

检查一下你的 index.html 或者入口文件，确认 uikit.min.js 被正确引入，而且是在 React 之前。如果是用 npm 安装的 uikit，确保 package.json 里有这个依赖，并且在入口文件里 import 了 JS 文件。

还有一个可能的坑：如果你的项目用了 SSR（比如 Next.js），那 UIkit 的初始化时机更要注意，必须在客户端渲染完成后再初始化。

2026-03-19 08:04