0

se eu tenho um objeto JS por ex:

cores = {
 main: "#333",
 institutional: "blue"
}

e eu uso styled components para montar meus estilos css então crio ele assim:

styled.View`
  background-color: cores.main;
`;

ele não funciona pois cores.main = "#333" e não #333 as aspas creio que atrapalhe alguém sabe o que devo fazer?

1
  • Não daria para fazer var cor = "#333" e depois em cores vc coloca cores = { main: cor } ? É só uma ideia mesmo pq não entendo bem de JS, mas vai que passa :)
    – hugocsl
    Commented 8/07/2019 às 14:13

2 Respostas 2

4

Primeiramente seria ideal se você colocasse esse objeto de variáveis como um tema no Provider do styled-components, assim:

import { ThemeProvider } from 'styled-components';

const cores = {
 main: "#333",
 institutional: "blue"
};

function App() {
  return (
    <ThemeProvider theme={cores}>
      <Componente />
    </ThemeProvider>
  );
}

Isso te possibilita usar as variáveis de tema em todos os componentes sem ter que ficar importando o objeto, fora que mudanças no provider se refletem em todo lugar pelo app.

E aí, no export do component, você faz assim, por exemplo:

import styled from 'styled-components'
import { View } from 'react-native'

export default styled(View)`
  background-color: ${props => props.theme.main};
`;

Funciona. Eu acho meio overkill usar styled-components em apps React Native, mas isso é assunto pra outra discussão...

1
  • Bem legal, não sabia disso! sobre overkill penso o mesmo sobre TS Commented 8/07/2019 às 15:01
1

Aqui tem um exemplo de como fazer isso

O arquivo com as cores:

export default {
  white: "#fff",
  lighter: "#eee",
  light: "#ddd",
  regular: "#999",
  dark: "#666",
  darker: "#333",
  black: "#000",

  primary: "#e5556e",
  secondary: "#444a5a",
  sucess: "#00bfa5",
  danger: "#e37a7a",
  background: "#27202c",

  transparent: "transparent",
  darkTransparent: "rgba(0, 0, 0, 0.6)",
  lighterWhiteTransparent: "rgba(255, 255, 255, 0.2)",
  whiteTransparent: "rgba(255, 255, 255, 0.5)",
  darkerWhiteTransparent: "rgba(255, 255, 255, 0.8)"
};

O arquivo com o styled components, onde o arquivo de cores é importado:

import styled from "styled-components/native";
import { Dimensions } from "react-native";
import { colors } from "../../styles";
var screen_height = Dimensions.get("window").height;

export const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 30px;
  height: ${screen_height};
  background-color: ${colors.background};
`;

export const Logo = styled.Text`
  color: ${colors.primary};
  font-size: 48px;
  font-weight: 500;
`;

export const Screen = styled.View`
  flex: 1;
`;

export const Form = styled.View`
  width: 100%;
  margin-top: 30px;
`;

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .