是否可以使用 styled-theming 自定义样式相关的道具？

Question

我正在使用 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>
  );
}

如果我直接使用颜色代码可以，但我想使用定义的变体，可以吗？

在此先感谢您的帮助！

Answer 1

好的。找到解决方案：

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

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

是否可以使用 styled-theming 自定义样式相关的道具？

Is it possible to use styled-theming to customize style-related props?

activity-indicator

react-native

styled-components