如何为react-native-markdown-display表格表头行修改下边框颜色?
解决react-native-markdown-display表头下边框样式问题
要修改表头行的下边框颜色,你需要在自定义样式中针对thead、th或表头行的tr元素单独设置边框样式,仅修改table的样式无法覆盖表头区域的边框。
修改后的代码示例
{props.message && ( <Markdown style={{ table: { borderColor: "white", color: "yellow", borderBlockEndColor: "yellow", borderStartColor: "yellow", borderEndColor: "yellow", }, // 针对表头容器设置下边框 thead: { borderBottomColor: "yellow", borderBottomWidth: 1, // 必须设置宽度,否则边框不显示 }, // 可选:针对表头单元格单独设置边框和文字样式 th: { borderBottomColor: "yellow", borderBottomWidth: 1, color: "yellow", }, }}> {` # h1 Heading ## h2 Heading ### h3 Heading #### h4 Heading ##### h5 Heading ###### h6 Heading Unordered + Create a list by starting a line with + Sub-lists are made by indenting 2 spaces: - Marker character change forces new list start: * Ac tristique libero volutpat at + Facilisis in pretium nisl aliquet - Nulla volutpat aliquam velit + Very easy! Ordered 1. Lorem ipsum dolor sit amet 2. Consectetur adipiscing elit 3. Integer molestie lorem at massa Start numbering with offset: 57. foo 58. bar | Option | Description | | ------ | ----------- | | data | path to data files to supply the data that will be passed into templates. | | engine | engine to be used for processing templates. Handlebars is the default. | | ext | extension to be used for dest files. | Right aligned columns | Option | Description | | ------:| -----------:| | data | path to data files to supply the data that will be passed into templates. | | engine | engine to be used for processing templates. Handlebars is the default. | | ext | extension to be used for dest files. | `} </Markdown> )}
说明
react-native-markdown-display的样式系统支持对Markdown的细分元素(如thead、th、tr)单独配置样式。表头的下边框默认绑定在thead容器或th单元格上,因此仅修改table的样式无法作用于这个区域。通过给thead或th设置borderBottomColor和borderBottomWidth,即可自定义表头下边框的样式。
内容的提问来源于stack exchange,提问作者Hilal Oruç
相关产品推荐
相关产品推荐

