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

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

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

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, встроенное в библиотеку npm, и установить для него значение true, и он просто переворачивает текст и тень и делает то же самое, но тень остается на месте, а текст перемещается... Я также попробовал CSS-модули css.js, а также встроенные стили. Я думаю, я мог бы попробовать использовать raw text-shadow css, но это как бы противоречит цели изучения этой конкретной библиотеки. Я предполагаю, что отсутствие опыта работы с React - это то, что меня кусает. Всем спасибо.


reactjs styling react-component shadow
person LarryYoung    schedule 30.01.2019    source источник
comment
После просмотра инструментов разработки для реагирования я заметил, что этот пакет создает отдельный div, содержащий тень. Возможно ли, что этот созданный теневой div расположен относительно?   -  person LarryYoung    schedule 30.01.2019
comment
Я также попытался обернуть компонент Shadowtext в его собственный div и центрировать div. Я могу приблизиться таким образом, но это недостаточно близко   -  person LarryYoung    schedule 30.01.2019

Ответы (1)


arrow_upward
0
arrow_downward

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

person LarryYoung    schedule 30.01.2019