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

问题描述

.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>

我试图仅在我的一页上显示一些乌尔都语文本。我试过在我的

标签上应用 dir="rtl" 但它不起作用。我曾尝试使用 react-with-direction，但它只会更改组件上所有项目的位置，而不会更改文本本身的任何内容。现在看起来就像下图一样，在这段代码中，标签应该在 rtl 中显示文本

解决方法

我使用了文本对齐方式使其正常工作，但不确定这是否是一个好习惯。