Можно ли использовать стилизованные темы для настройки реквизитов, связанных со стилем? - PullRequest
Новая
       84

Можно ли использовать стилизованные темы для настройки реквизитов, связанных со стилем?

0 голосов
/ 13 января 2020

Я использую React-Native и хочу изменить цветовую опору ActivityIndicator в соответствии с определенным стилем темы. Можно ли сделать что-то подобное, используя стилизацию тем? В ActivityIndicator цвет не устанавливается с помощью 'style'.

Например: 

import React from 'react';
import styled, {ThemeProvider} from 'styled-components';
import theme from 'styled-theming';

// This works
const backgroundColor = theme('mode', {
  light: '#fff',
  dark: '#000',
});

const StyledView = styled.View`
    background-color: ${backgroundColor};
    flex: 1;
    justify-content: center;
`;

// This not works
const sampleColor = theme('mode', {
  light: '#000',
  dark: '#fff',
});

const StyledActivityIndicator = styled.ActivityIndicator.attrs(props => ({
    color: ??? // how can i use sampleColor here?
})) ``

export default function App() {
  return (
    <ThemeProvider theme={{ mode: 'dark' }}>
      <StyledView>
          <StyledActivityIndicator></StyledActivityIndicator>
      </StyledView>
    </ThemeProvider>
  );
}

Если я использую цветовой код, он работает напрямую, но я хотел бы использовать определенные варианты, если это возможно?

Заранее спасибо за помощь!

1 Ответ

0 голосов
/ 14 января 2020

Хорошо. Нашел решение: 

const sampleColor = theme('mode', {
    light: '#000',
    dark: '#fff',
});

const StyledActivityIndicator = styled.ActivityIndicator.attrs(props => ({
    color: sampleColor(props)
}))
...