javascript 如何使用样式化组件在不同组件上使用相同样式

xvw2m8pv 于 2023-04-19 发布在 Java

关注(0)|答案(1)|浏览(141)

我在React-native中有这两个组件

const TouchableContainer = styled.TouchableOpacity`
  flex: 1;
  background-color: ${(props: any) => (props.expired ? '#ebebeb' : '#ffffff')};
  flex-direction: row;
  display: flex;
  padding-horizontal: 20px;
  padding-vertical: 12px;
  border-radius: 20px;
  margin: 3px 15px 3px 15px;
  shadow-color: #000;
  shadow-opacity: 0.23;
  shadow-radius: 2.62px;
  shadow-offset: 0px 3px;
  elevation: 4;
`;

const CardView = styled.View`
  flex: 1;
  background-color: ${(props: any) => (props.expired ? '#ebebeb' : '#ffffff')};
  flex-direction: row;
  display: flex;
  padding-horizontal: 20px;
  padding-vertical: 12px;
  border-radius: 20px;
  margin: 3px 15px 3px 15px;
  shadow-color: #000;
  shadow-opacity: 0.23;
  shadow-radius: 2.62px;
  shadow-offset: 0px 3px;
  elevation: 4;
`;

风格是相同的，所以这是分解它的方法：（我没有找到一个简单的解决方案，所以这是一个工作的答案）

JavaScript

来源：https://stackoverflow.com/questions/76018919/how-to-use-same-style-on-different-component-with-styled-components

1条答案

按热度按时间

xxe27gdn1#

const style = `
  flex: 1;  
  flex-direction: row;
  display: flex;
  padding-horizontal: 20px;
  padding-vertical: 12px;
  border-radius: 20px;
  margin: 3px 15px 3px 15px;
  shadow-color: #000;
  shadow-opacity: 0.23;
  shadow-radius: 2.62px;
  shadow-offset: 0px 3px;
  elevation: 4;
`;

const TouchableContainer = styled.TouchableOpacity`
  ${style}
  background-color: ${(props: any) => (props.expired ? '#ebebeb' : '#ffffff')};
`;

const CardView = styled.View`
  ${style}
  background-color: ${(props: any) => (props.expired ? '#ebebeb' : '#ffffff')};
`;

赞(0）回复(0）举报 2023-04-19

我来回答

javascript 如何使用样式化组件在不同组件上使用相同样式

1条答案

相关问题

热门标签

最新问答