Javascript 将样式添加到React Native中的已设置样式的组件自定义组件

我有

按钮.js

：

import React from "react";
import styled from "styled-components";

const StyledButton = styled.TouchableOpacity`
  border: 1px solid #fff;
  border-radius: 10px;
  padding-horizontal: 10px;
  padding-vertical: 5px;
`;

const StyledButtonText = styled.Text`
  color: #fff;
  font-size: 12;
`;

export default ({ children }) => (
  <StyledButton>
    <StyledButtonText>{children.toUpperCase()}</StyledButtonText>
  </StyledButton>
);

从“React”导入React；
从“样式化组件”导入样式化；
const StyledButton=styled.TouchableOpacity`
边框：1px实心#fff；
边界半径：10px；
水平填充：10px；
垂直填充：5px；
`;
const styledbuttonext=styled.Text`
颜色：#fff；
字号:12 ;；
`;
导出默认值（{children}）=>(
{children.toUpperCase（）}
);

及其用法：

import React, { Component } from "react";
import styled from "styled-components";
import Button from "./button";

const StyledNavView = styled.View`
  justify-content: flex-end;
  flex-direction: row;
  background: #000;
  padding-horizontal: 10px;
  padding-vertical: 10px;
`;

const StyledTodayButton = styled(Button)`
  margin: 10px;
`;

export default class Nav extends Component {
  render() {
    return (
      <StyledNavView>
        <StyledTodayButton>Today</StyledTodayButton>
        <Button>Previous</Button>
      </StyledNavView>
    );
  }
}

import React，{Component}来自“React”；
从“样式化组件”导入样式化；
从“/”按钮导入按钮；
const StyledNavView=styled.View`
证明内容：柔性端；
弯曲方向：行；
背景：#000；
水平填充：10px；
垂直填充：10px；
`;
const StyledTodayButton=styled（按钮）`
利润率：10px；
`;
导出默认类Nav扩展组件{
render（）{
返回(
今天
以前的
);
}
}

---

问题是，我在

StyledTodayButton

中应用的边距实际上从未应用过。我是否误解了在样式化组件中扩展样式？

有两种方法可以让它工作：

• 扩展按钮样式：

const StyledTodayButton=按钮。扩展“边距：10px”

• 将道具传递到按钮：

const-Button=styled.Button'
/*…你的道具*/
边距：${props=>props.withMargin？'10px'：'0px'}；

然后调用render方法，您可以使用以下方法调用它：

<Button withMargin  {...restProps} /> 

---

with

&

extend

API标记为已折旧。还有别的办法吗？我不想将道具传递给每个样式属性进行自定义。。。