react-native-markdown-显示样式表

问题描述 投票:0回答:1

我目前正在使用react-native-markdown-display来显示我的聊天数据。但我不确定如何为表格边框颜色添加样式,也没有在文档中提及。 我找到了一种改变外边框颜色的方法,但是头行的底部边框没有运气。有什么办法可以改变它的颜色吗?

这是降价:

这是我用来定制的代码:

 {props.message && (
                <Markdown
                  style={{
                   
                    table: {
                      borderColor: "white",
                      color: "yellow",
                      borderBlockEndColor: "yellow",
                      borderStartColor: "yellow",
                      borderEndColor: "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>
              )}
reactjs react-native
1个回答
0
投票

您可以使用

tr
设置内部边框线的样式。

const styles = StyleSheet.create({
    tableBorder: {
      borderWidth: 1,
      borderColor: '#FFF',
      borderStyle: 'solid',
    }
 });
 <Markdown
  style={{
      table: styles.tableBorder,
      tr: styles.tableBorder
  }}>
   {text}
 </Markdown>
© www.soinside.com 2019 - 2024. All rights reserved.