React Native：意外显示<ul>或<li>

Question

我正在使用 React 模板中的代码。 我正在添加隐私页面。

我的问题是，当我为项目符号列表添加

<ul> + <li>

时：

• 它不显示项目符号
• 不添加左边距
• 更改字体大小和颜色

显然，它必须来自全局CSS样式，但我不熟悉React也不熟悉bootstrap。我可以看到 styles.css、bootstrap.css 等文件。 bootstrap.css 很大，我可以看到这些行：

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {
  margin-bottom: 0;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.list-inline {
  padding-left: 0;
  margin-left: -5px;
  list-style: none;
}
.list-inline > li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
}
dl {
  margin-top: 0;
  margin-bottom: 20px;
}
dt,
dd {
  line-height: 1.42857143;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 0;
}

我不知道如何阅读。

我的最终目标是拥有项目符号列表，其中包含项目符号和边距以及相同的字体，但也要了解决定网络最终渲染的因素。

渲染风格：

完整代码：

import React from 'react';
import PageTitle from '../components/pagetitle/PageTitle';


const Privacy = (props) => {
    const liStyle = {
        marginLeft: 35,
        listStyleType: 'disc', // Setting list style type to 'disc' to show bullet points
    };

    return (
        <div>
            <PageTitle sub='Resources' title='Privacy Policy' />

            <section className="tf-blog-detail">
                <div className="tf-container">
                    <div className="row justify-content-center">
                        <div className="col-md-10">
                            <div className="detail-inner">
                                <div style={{ marginBottom: 100 }} className="content-top">
                                    <h4 style={{ marginBottom: 15 }} className="title">Privacy Policy</h4>
                                    <span>Updated: February 06th, 2024</span>
                                </div>
                                <div className="content-inner">
                                    <h5 style={{ marginTop: '30px', marginBottom: '10px' }}>3. Use of Information</h5>
                                    <p>Generally, we may use the information we collect to provide you with the best possible product and service, and continually improve them. Specifically, we may use your personal information as described in this Privacy Policy to ensure our services work properly, and for other research and commercial purposes. These purposes include, among other things, to:</p>
                                    <ul>
                                        <li>to provide, maintain, personalize, and improve our services and create a better experience for users in our application and with our services;</li>
                                        <li>to create user accounts and/or profiles through registration and import user contacts;</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

        </div>
    );
}

export default Privacy;

Answer 1

Bootstrap 默认情况下不会删除任何列表项目符号点。如果您使用顺风预检

@tailwind base

，默认情况下 列表是无样式的 :

有序和无序列表默认情况下是无样式的，没有项目符号/数字，也没有边距或填充。

正如 this tailwind github post 中所讨论的，一个最简单的解决方案是使用

@layer

覆盖包含 tailwind 预检的 CSS 文件中的预检样式：

@tailwind base;
@tailwind components;
@tailwind utilities;

/*overwrite tailwind preflight styles for ul, ol*/
@layer base {
    ul, ol {
      list-style: initial;
      margin: initial;
      padding: initial;
    }
  }