如何在不丢失与文本阴影的绑定的情况下使文本在原始react- shadow -text中居中

Question

我正在学习如何设计React组件的样式，以及如何使用npm导入库来做不同的事情。我导入了react- shadow -text，并尝试实现了一个带有文本阴影的简单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?
}

我已经尝试使用CSS prop内置到npm库中，并将其设置为true，它只是翻转文本和阴影，并做同样的事情，但阴影留在原地，文本移动…我也尝试了anchorShadow模块css.js以及内联样式。我想我可以尝试使用原始的文本阴影css，但它有点违背了学习这个库的目的。我想让我苦恼的是缺乏使用React的经验。谢谢大家。

Answer 1

我注意到，当react-text-shadow库添加阴影时，它在一个绝对定位的单独div中添加阴影。如果我去掉了dev tools中的位置，阴影就会跳到中心。因此，我尝试在create-react应用程序环境中隔离index.css中的类，并更改position值。当这样做的时候，它起作用了，直到我尝试编辑阴影偏移以使其更精确地对齐。一旦我更改了控制shadowTranslateXorY和重新加载的属性，它就会为阴影生成一个新的类，这会取消我在主index.css文件中所做的定位更改。现在，我将只使用CSS text-shadow。将文本阴影放入组件的css文件中，然后将其导入到组件中，然后使用className引用它就可以了。希望其他人对这个库有更多的了解。我似乎找不到太多关于它的文档，除了安装时NPM页面上的文档。