Hướng dẫn dynamically load css react - tải động css react

Đây là teritority chính. Đầu tiên chúng tôi sẽ xác định một người trợ giúp để quản lý các bảng phong cách.

Chúng tôi cần một chức năng tải một bảng kiểu và trả lại một lời hứa cho thành công của nó. Các tấm phong cách thực sự khá điên rồ khi phát hiện tải trên ...

function loadStyleSheet(url){
  var sheet = document.createElement('link');
  sheet.rel = 'stylesheet';
  sheet.href = url;
  sheet.type = 'text/css';
  document.head.appendChild(sheet);
  var _timer;

  // TODO: handle failure
  return new Promise(function(resolve){
    sheet.onload = resolve;
    sheet.addEventListener('load', resolve);
    sheet.onreadystatechange = function(){
      if (sheet.readyState === 'loaded' || sheet.readyState === 'complete') {
        resolve();
      }
    };

    _timer = setInterval(function(){
      try {
        for (var i=0; i

Vâng, $#! Điều này chưa được kiểm tra, vì vậy vui lòng cập nhật nó nếu có bất kỳ lỗi nào - nó được tổng hợp từ một số bài viết trên blog.

Phần còn lại khá thẳng về phía trước:

• Cho phép tải một bảng kiểu
• Cập nhật trạng thái khi có sẵn (để ngăn chặn FOUC)
• dỡ bất kỳ bảng kiểu được tải nào khi thành phần không nghe thấy
• xử lý tất cả sự tốt đẹp không đồng bộ

var mixin = {
  componentWillMount: function(){
    this._stylesheetPromises = [];
  },
  loadStyleSheet: function(name, url){
    this._stylesheetPromises.push(loadStyleSheet(url))
    .then(function(link){
      var update = {};
      update[name] = true;
      this.setState(update);
    }.bind(this));
  },
  componentWillUnmount: function(){
    this._stylesheetPromises.forEach(function(p){
      // we use the promises because unmount before the download finishes is possible
      p.then(function(link){
        // guard against it being otherwise removed
        if (link.parentNode) link.parentNode.removeChild(link);
      });
    });
  }
};

Một lần nữa, chưa được kiểm tra, xin vui lòng cập nhật điều này nếu có bất kỳ vấn đề nào.

Bây giờ chúng ta có thành phần.

React.createClass({
  getInitialState: function(){
    return {foo: false};
  },
  componentDidMount: function(){
    this.loadStyleSheet('foo', '/css/views/foo.css');
  },
  render: function(){
    if (!this.state.foo) {
      return 

    }

    // return conent that depends on styles
  }
});

TODO duy nhất còn lại là kiểm tra xem bảng kiểu đã tồn tại trước khi cố gắng tải nó. Hy vọng rằng điều này ít nhất sẽ giúp bạn đi đúng hướng.

import React, { useEffect } from 'react';

const DynamicStyle = () => {
    
    useEffect(() => {
        
        // Declaring new date
        let date = new Date();
        
        // Defining morning and afternoon hours
        let morning = date.getHours() <  12;
        
        // Importing files depending on time of the day
        if(morning) import (`../Styles/morning.css`);
        else        import (`../Styles/afternoon.css`);
        
    }, []);
    
    return(
        
This is a dynamic component.
    );
    
}

export default DynamicStyle;
Đây sẽ là morning.css:morning.css:



p{
    background: white;
    color: black;
}
Và điều này sẽ là afternoon.css:afternoon.css:
p{
    background: black;
    color: white;
}
Ghi chú
Ví dụ trước sẽ hoạt động nếu bạn cần nhập .css một lần, nhưng nếu bạn cần trao đổi giữa 2 tệp, nó sẽ không.Hãy nhớ rằng bạn không thể truy cập các tệp .css đã nhập.
Example:
import React, { useEffect, useState } from 'react';

const DynamicStyle = () => {
    
    const [style, setStyle] = useState('morning');
    
    const changeTheme = () => {
        
        // ❌ This won't work because after 2 clicks
        // ❌ Both morning.css and afternoon.css will be imported
        // ❌ And the css variables may overlap
        if(style === 'afternoon') {
            
            import (`../Styles/morning.css`);
            setStyle('morning');
            
        }
        else{
            
            import (`../Styles/afternoon.css`);
            setStyle('afternoon');
            
        }
        
    }
    
    return(
        
            Click me
        
    );
    
}

export default DynamicStyle;
Nếu bạn cần trao đổi giữa các tệp .css, tốt hơn là sử dụng một ____77 với các biến làm thuộc tính.