Reactjs 不允许 dir= "rtl" 显示文本 RTL

Question

.rtl{
direction: rtl;
}

<Col lg="9" md="8" sm="7">
<div className="blog-details-box">
<div className="blog-details-banner">
<img src={process.env.PUBLIC_URL + `/assets/images/${Datas[blogId].postImg}`} alt="" className="img-fluid" />
</div>
<div className="heading" dir="rtl">
<h4 className="rtl">{Datas[blogId].postTitle}</h4>
</div>
<div className="blog-auth_date d-flex">

<div className="author-img d-flex">   
<p><Link to={process.env.PUBLIC_URL + "/"}>{Datas[blogId].authorName}</Link></p>
</div>
<div className="post-date">
<p><i className="las la-calendar"></i> {Datas[blogId].postDate}</p>
</div>

</div>

<div className="blog-details-desc">
<p> {Datas[blogId].postContent}</p>

</div>



</div>
</Col>

我试图在我的一个页面上只显示一些urdu文本。我已经尝试应用dir＝"；rtl"；在我的

标签上，但它不起作用。我尝试过使用方向反应，但它只会改变组件上所有项目的位置，而不会改变文本本身的任何内容。现在它看起来像下面的图片，在这个代码中，标签应该显示rtl 中的文本

Answer 1

我使用了正确的文本对齐来使其工作，但不确定这是否是一种好的做法。