如何在原始反应阴影文本中居中文本而不丢失与文本阴影的绑定答案

【问题标题】：How to center text in raw react-shadow-text without losing binding to text shadow如何在原始反应阴影文本中居中文本而不丢失与文本阴影的绑定
【发布时间】：2019-06-24 03:19:37
【问题描述】：

我正在学习如何设置 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?
}

我尝试使用 npm 库中内置的 anchorShadow 属性并将其设置为 true，它只是翻转文本和阴影并做同样的事情，但阴影保持在原位并且文本移动......我'也尝试过 CSS Modules css.js 和内联样式。我想我可以尝试使用 raw text-shadow css，但这有点违背了学习这个特定库的目的。我认为缺乏 React 经验是困扰我的原因。谢谢大家。

【问题讨论】：

查看 react 开发工具后，我注意到这个包创建了一个包含阴影的单独 div。会不会是因为这个创建的阴影 div 是相对定位的？
我还尝试将 Shadowtext 组件包装在它自己的 div 中并居中 div。我可以这样靠近，但距离不够

标签： reactjs styling shadow react-component

【解决方案1】：

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

【讨论】：