如何在不丢失对文本阴影的绑定的情况下将文本置于原始反应阴影文本的中心

Question

我正在学习如何设计React组件的样式，并使用npm导入可以用来做不同事情的库。我导入了react shadow文本，并尝试用文本shadow实现一个简单的h1。当尝试设置它的样式时，我的所有样式都可以使用，但当我将文本置于组件的中心时，阴影不会与文本一起居中。如果我不将文本居中并调整浏览器大小。阴影与文本保持在一起，正如您所期望的那样，但一旦您将对齐内容、文本对齐或任何居中属性应用于组件，文本就会居中，但阴影会保持在左侧，并且阴影不会与文本一起保持在中心，而是在调整大小时保留在左侧，使其远离文本。

我试过使用flexbox居中，也试过不使用flexbox。我还尝试使用不同的样式技术(如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?
}

我试过使用npm库中内置的anchorShadow道具，并将其设置为true，它只是翻转文本和阴影并做同样的事情，但阴影保持不变，文本移动。。。我也尝试过CSS模块CSS.js和内联样式。我想我可以尝试使用原始文本阴影css，但它有点违背了学习这个特定库的目的。我想React缺乏经验是折磨我的原因。谢谢大家。

Answer 1

我注意到，当react文本阴影库添加阴影时，它会在一个单独的div中添加阴影，该div是绝对定位的。如果我去掉开发工具中的定位，阴影就会跳到中心。因此，我尝试在create-react-app环境中的index.css中隔离该类，并更改了位置值。这样做的时候，效果很好，直到我尝试编辑阴影偏移，使其更精确地对齐。一旦我更改了属性以控制shadowTranslateXorY并重新加载，它就会为阴影生成一个新的类，这将否定我在master index.css文件中所做的定位更改。现在，我只使用CSS文本阴影。将文本阴影放入组件的css文件中，将其导入组件，并使用className引用它，可以很好地工作。希望其他人对这个特定的图书馆有更多的了解。除了安装时NPM页面上的内容外，我似乎找不到太多关于它的文档。