从object标签data属性加载文本时text-align居中失效如何解决

问题根因 #

<object> 标签加载外部资源时会创建独立的沙箱上下文，父页面的CSS无法作用到其内部加载的txt文档上，这是你设置的text-align不生效的核心原因。

额外提示：你原代码中调用Container组件的地方存在语法错误，file= this.state.currentFile}需修改为file={this.state.currentFile}，避免运行报错。

方案1：替换object标签，用fetch获取文本直接渲染（更推荐） #

直接请求txt文件内容插入当前页面DOM，可完全自由控制样式，不存在上下文隔离问题。

组件代码修改 #

// 函数组件示例，如果是类组件在componentDidMount/useEffect中执行请求即可
import { useState, useEffect } from 'react';

const Container = (props) => {
  const [txtContent, setTxtContent] = useState('');

  useEffect(() => {
    // 发起请求获取txt文本内容
    fetch(`/Notes/${props.file}`)
      .then(response => response.text())
      .then(content => setTxtContent(content))
      .catch(err => console.error('文本加载失败：', err));
  }, [props.file]);

  return (
    <div className="NoteContainer">
      <div className="txt-content">{txtContent}</div>
    </div>
  );
};

CSS补充 #

.txt-content {
  text-align: center;
  width: 100%;
}

方案2：保留object标签，动态修改内部文档样式 #

如果必须使用object实现，可在资源加载完成后获取其内部文档对象，手动插入样式规则，仅适用于txt资源和当前页面同域的场景。

组件代码修改 #

const Container = (props) => {
  const handleObjLoad = (e) => {
    const obj = e.target;
    // 获取object内部文档对象
    const innerDoc = obj.contentDocument || obj.contentWindow.document;
    // 给内部body添加居中样式，可按需添加其他样式适配页面
    innerDoc.body.style.textAlign = 'center';
    innerDoc.body.style.margin = '0';
    innerDoc.body.style.background = 'transparent';
    innerDoc.body.style.color = '#fff';
  };

  return (
    <div className="NoteContainer">
      <object 
        data={`/Notes/${props.file}`} 
        onLoad={handleObjLoad}
        type="text/plain"
      />
    </div>
  );
};

CSS补充 #

.NoteContainer {
  padding:40px;
  width: 100%;
  /* 可设置最大宽度避免文本在大屏下太分散 */
  max-width: 700px;
}
.NoteContainer object {
  width: 100%;
  border: none;
  /* 按需设置object高度 */
  min-height: 100px;
}

内容的提问来源于stack exchange，提问作者Mason Clark