Использование внешней таблицы стилей в SVG не работает в JSX

Question

Я загружаю SVG в приложение реакции.SVG ссылается на внешнюю таблицу стилей.

Если я перемещаю SVG из JSX в index.html, SVG использует определенный класс CSS.

Если я использую такую ​​библиотекукак реагировать-svg, svg загружает внешний класс css в JSX.

Почему SVG не загружает внешний CSS при использовании SVG в JSX?

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ReactSVG from 'react-svg'
    class App extends Component {
      render() {
        return (
          <object data={logo} className="App-logo" type="image/svg+xml"></object> 
        );
      }
    }

    export default App;




<?xml-stylesheet type="text/css" href="./App.css" ?>
    <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
        <g class='svgTestFill'>
            <path  d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 ..."/>
            <circle  cx="420.9" cy="296.5" r="45.7"/>
            <path   d="M520.5 78.1z"/>
        </g>
    </svg>

Это должно сделатьлоготип с красной заливкой.Я также не хочу использовать SVG inline.Я должен импортировать SVG как объект.

После проверки сетевых запросов файл CSS, на который я ссылаюсь в SVG, возвращается из приложения create-response в виде HTML-страницы, а не CSS.Может в этом проблема?

Answer 1

Получается, что это проблемы с приложением crate реакции.При использовании относительного пути в SVG запрос к внешнему листу будет находиться в каталоге static / media.Если путь к внешнему листу CSS в абсолютном выражении, это работает.