PixUI 项目国际化方案

index.html 中下面元素为不同语言设置不同的 class

html

<div id="container" class="pixui-page lang-zh"></div>

动态设置：

function addClassLang() {
  const dom = document.querySelector('#container');
  if (!dom) return;

  // 模拟逻辑，非真实判断
  dom.classList.add('lang-en');
  dom.classList.remove('lang-zh');
}

样式文件中注意用 :global 包裹选择器

less

.index-page {
  height: 100%;
}

:global(.lang-zh) {
  .index-page {
    // 仅在中文环境下生效
    height: 50%;
  }
}

tsx 中（逻辑不变）

tsx

class Home extends Component {
  render() {
    return (
      <div
        className={styles['index-page']}
      >
      </div>
    );
  }
}

效果展示

PixUI 项目国际化方案 ​

PixUI 项目国际化方案