Как центрировать текст в необработанном тексте реакции-тени без потери привязки к тени текста

Question

Я учусь стилизовать компоненты React и использовать npm для импорта библиотек, которые я могу использовать для разных задач.Я импортировал response-shadow-text и попытался реализовать простой h1 с текстовой тенью.При попытке его стилизовать все мои стили работают, но когда я центрирую текст внутри компонента, тень не центрируется вместе с текстом.Если я не центрирую текст и я изменяю размер браузера.тень остается с текстом, как и следовало ожидать, но как только вы применяете к компоненту justify-content, text-align или любое другое свойство центрирования, текст центрируется сам, но тень остается слева, а тень не остаетсяв центре с текстом и вместо этого остается слева во время изменения размера, делая себя дальше от текста.

Я пробовал использовать центрирование flexbox, и я также пробовал без flex.Я также попытался стилизовать компонент с помощью различных методов стилевого оформления, таких как модули CSS и встроенные стили.Я уверен, что это что-то простое, но я не могу найти что-либо по вопросам, касающимся именно этой библиотеки, без использования native.

import React, { Component } from 'react';
import ShadowText from 'react-shadow-text';
import styles from '../Name.css'; //imported stylesheet working
import styled from 'styled-components';
//import styles from '../Name.css';

class Name extends Component {
  render() {
    return(
        <ShadowText className="name" theme={{
          shadowTextColor: 'Black',
          shadowTextShadowColor: 'Black',
          shadowTextShadowBlur: '6px',
          shadowTextXTranslate: '0px',
          shadowTextYTranslate: '15px',
          textShadowOffset: '0px', //tried messing with this
          shadowTextTransitionDuration: '0.4s',
          shadowTextTransitionTiming: 'ease-in-out',
        }}>
          Larry Young
        </ShadowText>
    );
  }
}

export default Name;

И CSS

.name {
  font-size: 2.5em;
  font-family: 'Cinzel';
  width: 100vw;
  height: 20vh;
  text-align: center; //problem child. without this, text stays to the left 
                      //but shadow attaches itself to text. When this is 
                      //added, or justify content is added, text detaches 
                      //from shadow effect. Positioning issue maybe?
}

Я пытался использовать anchorShadow prop, встроенный в библиотеку npm, и установить его в true, а он просто переворачивает текст и тень и выполняетТо же самое, но тень остается на месте, а текст перемещается ... Я также пробовал CSS-модули css.js и встроенные стили.Я думаю, я мог бы попытаться использовать необработанные CSS-текстовые тени, но это как бы побеждает цель изучения этой конкретной библиотеки.Я предполагаю, что нехватка опыта с React - то, что кусает меня.Спасибо всем.

Answer 1

Я заметил, что когда библиотека реагировать на текстовые тени добавляет тень, она делает это в отдельном элементе div с абсолютным позиционированием.Если я уберу позиционирование в инструментах разработки, тень прыгнет в центр.Поэтому я попытался изолировать этот класс в index.css в среде приложения create-Reaction и изменил значение позиции.При этом это работало, пока я не попытался отредактировать смещение тени, чтобы выровнять его более точно.Как только я изменил свойства для управления shadowTranslateXorY и перезагрузки, он генерирует новый класс для тени, который отменяет изменение позиционирования, которое я сделал в главном файле index.css.Сейчас я просто буду использовать CSS text-shadow.Помещение text-shadow в css-файл для компонента, импорт его в компонент и обращение к нему с помощью className работает нормально.Надеюсь, кто-то еще знает немного больше об этой библиотеке.Кажется, я не могу найти много документации об этом, кроме того, что находится на странице NPM при установке.