Использовать строку для стилей в Gatsby - PullRequest
Новая
       210

Использовать строку для стилей в Gatsby

0 голосов
/ 04 августа 2020

Я импортирую страницы с сайта WordPress, который использует Elementor. Некоторые элементы имеют атрибут customCss, который является строкой. Как я могу применить его к компоненту реакции? Я пробовал использовать style-it, но, похоже, не работает.

iconBox. js

import React from 'react';
import Style from 'style-it';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faHome,
  faSeedling,
  faDog,
  faWheelchair,
  faKey,
  faHeartbeat,
  faEllipsisH,
  faCarSide,
} from '@fortawesome/free-solid-svg-icons';
import { toCamelCaseString } from '../utils/renderWidget';
const FAIcons = {
  faHome: faHome,
  faSeedling: faSeedling,
  faDog: faDog,
  faWheelchair: faWheelchair,
  faKey: faKey,
  faHeartbeat: faHeartbeat,
  faEllipsisH: faEllipsisH,
  faCarSide: faCarSide,
};

export default function IconBox(settings) {
  console.log('---icon box---');
  console.log(settings);
  if (settings.selected_icon) {
    const iconName = toCamelCaseString(settings.selected_icon.value.split(' ')[1]);
    const customCss = settings.custom_css.replace(/\u21b5/g, '');
    return Style.it(
      customCss,
      <div
        className="elementor-widget-container"
        style={{
          borderColor: settings._border_border,
          borderWidth: `${settings._border_width.bottom}${settings._border_width.unit}`,
        }}
      >
        <div className="elementor-icon-box-wrapper">
          <div className="elementor-icon-box-icon">
            <a
              className="elementor-icon elementor-animation-"
              style={{ color: settings.primary_color }}
              href="\"
            >
              <FontAwesomeIcon icon={FAIcons[iconName]} size={`${settings.icon_space.size}x`}>
                ::before == $0
              </FontAwesomeIcon>
            </a>
          </div>
          <div className="elementor-icon-box-content">
            <h3 className="elementor-icon-box-title">
              <a
                href={settings.link.url}
                style={{
                  color: settings.title_color,
                  fontFamily: settings.title_typography_font_family,
                  fontSize: `${settings.title_typography_font_size.size}${settings.title_typography_font_size.unit}`,
                  fontWeight: settings.title_typography_font_weight,
                }}
              >
                {settings.title_text}
              </a>
            </h3>
          </div>
        </div>
      </div>
    );
  }
}

сгенерировано html

<div class="elementor-widget-container s1873281216" style="border-width: 1px;">
    <style type="text/css">
    .s1873281216 selector:hover .elementor-icon {
        color: white!important;
    }
    
    .s1873281216 selector:hover h3 span {
        color: white!important;
    }
    
    .s1873281216 selector:hover h3 a {
        color: white!important;
    }
    
    .s1873281216 selector:hover {
        background-color: #00bf91;
    }
    </style>
    <div class="elementor-icon-box-wrapper">
        <div class="elementor-icon-box-icon">
            <a class="elementor-icon elementor-animation-" href="\" style="color: rgb(0, 191, 145);">
                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home" class="svg-inline--fa fa-home fa-w-18 fa-3x " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
                    <path fill="currentColor" d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path>
                </svg>
            </a>
        </div>
        <div class="elementor-icon-box-content">
            <h3 class="elementor-icon-box-title"><a href="https://honestpolicy.com/blog/homeowners-insurance/" style="color: rgb(0, 0, 0); font-family: Poppins; font-size: 18px; font-weight: 400;">Homeowners</a></h3></div>
    </div>
</div>
...