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?
}

我尝试使用内置在npm库中的anchorShadow道具并将其设置为true，它只是翻转文本和阴影并执行相同的操作，但是阴影保留在原处并且文本移动了……我还尝试了CSS模块css.js和内联样式。我想我可以尝试使用原始的文本阴影CSS，但这有点违反了学习此特定库的目的。我认为对React缺乏经验困扰着我。谢谢大家。

Answer 1

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

如何在未反应的阴影阴影文本中居中放置文本，而又不会与文本阴影绑定

1 个答案: