Добавление стилей в пользовательский компонент Styled Component в React Native - PullRequest
Новая
       10

Добавление стилей в пользовательский компонент Styled Component в React Native

0 голосов
/ 05 июля 2018

у меня button.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>
);

И его использование: 

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>
    );
  }
}

Проблема в том, что поле, которое я применяю в StyledTodayButton, фактически никогда не применяется. Я неправильно понял расширение стилей в Styled Components?

1 Ответ

0 голосов
/ 05 июля 2018

Есть 2 способа заставить его работать:

  • стиль кнопки расширения:

const StyledTodayButton = Button.extend'margin: 10px'

  • передать реквизит кнопке: 
const Button = styled.button'

/* ...your props */

margin: ${props => props.withMargin ? '10px' : '0px'};

, а затем вызвать метод рендеринга, вы можете вызвать его с помощью: 

<Button withMargin  {...restProps} />
...