时间戳

首页 > 解决方案 > 如何在原始反应阴影文本中居中文本而不丢失与文本阴影的绑定

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

问题描述

我正在学习如何设置 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 经验是困扰我的原因。感谢大家。

标签： reactjsstylingshadowreact-component

解决方案

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

推荐阅读