fix: 修复ListItem 的样式问题

thundersdata-frontend · Dec 14, 2023 · cce84ed · cce84ed
1 parent 03291ca
commit cce84ed
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 17 deletions.
diff --git a/.changeset/lemon-guests-explain.md b/.changeset/lemon-guests-explain.md
@@ -0,0 +1,5 @@
+---
+'@td-design/react-native': patch
+---
+
+fix: 修复 list-item 组件的样式问题
diff --git a/packages/react-native/src/list-item/index.tsx b/packages/react-native/src/list-item/index.tsx
@@ -166,25 +166,23 @@ const Content = ({
       style={[{ backgroundColor }, style]}
     >
       <Flex>
-        <Box flex={1}>
-          <Flex>
-            <Flex marginRight={'x5'} justifyContent="center" alignItems="center">
-              {required && (
-                <Text variant="p1" color="func600">
-                  *
-                </Text>
-              )}
-              {thumb}
-              {Title}
-            </Flex>
-            <Box flex={1} alignItems="flex-end">
-              {Extra}
-            </Box>
+        <Flex flex={1}>
+          <Flex marginRight={'x5'} justifyContent="center" alignItems="center">
+            {required && (
+              <Text variant="p1" color="func600">
+                *
+              </Text>
+            )}
+            {thumb}
+            {Title}
           </Flex>
-          {!!brief && <Brief wrap={wrap}>{brief}</Brief>}
-        </Box>
+          <Box flex={1} alignItems="flex-end">
+            {Extra}
+          </Box>
+        </Flex>
         {Arrow}
       </Flex>
+      {!!brief && <Brief wrap={wrap}>{brief}</Brief>}
     </Box>
   );
 };
diff --git a/packages/react-native/src/list/index.tsx b/packages/react-native/src/list/index.tsx
@@ -34,7 +34,9 @@ const List: FC<ListProps> = ({ header, extra, itemBackgroundColor, itemStyle, it
     <Box>
       {Header}
       {items.map((props, index) => {
-        return <ListItem key={index} {...props} backgroundColor={itemBackgroundColor} style={itemStyle} />;
+        return (
+          <ListItem key={index} {...props} backgroundColor={itemBackgroundColor} style={[itemStyle, props.style]} />
+        );
       })}
     </Box>
   );