前言

相信很多同学都是用postcss-px-to-viewport解决适配问题，最近发现这个插件在行内样式中不能转换，通过搜索后了解到，在Vue中可以利用style-vw-loader这个插件解决行内样式问题，可是这个插件不兼容React。没办法啦，想到最快的办法就是定义一个全局的函数解决这个问题，所以就利用useContext来实现

实现步骤

新建一个toStylePx.js文件，要确定好基准值，我们的设计稿是1920px的

import React,{useState,useContext} from "react";

//暴露出方法，让组件使用这个context转换px
const StyleToPx = React.createContext();

export function useStyleTopx(){
  return useContext(StyleToPx);
}

export function ViewportProvider({children}){
  function pxToVw (px) {
    return px / 1920 * 100 + 'vw'
  }

  return(
    <StyleToPx.Provider value={pxToVw}>
      {children}  
    </StyleToPx.Provider>
  )
}

在App.js中使用

import "./App.css";
import { ViewportProvider } from "./components/toStylePx";

function App() {
  return (
    <ViewportProvider>
      <div className="App">
        ......
      </div>
    </ViewportProvider>
  );
}

export default App;

在组件中使用

import React, { useEffect, useRef, useState } from "react";
import {useStyleTopx} from "../../components/toStylePx"

function Example(props) {
    ... ...
   //调用useStyleTopx中的方法转换px
  const toPx = useStyleTopx();
  return (
    <div className="Example">
      <div className="about_wrapper">
        <div className="content_wrapper">
          <h1 className="title" style={{fontSize:`${toPx(123)}`}}>{t("example.title")}</h1>
        </div>
      </div>
    </div>
  );
}

export default Example;

END

希望这篇文章可以帮助到有需要的小伙伴们，有问题可以评论或私信我呀🤞🤞

利用useContext解决postcss-px-to-viewport行内样式问题

前言

实现步骤

END