Дочерние компоненты не имеют props.theme для стилизованных компонентов с React Router - PullRequest
Новая
       11

Дочерние компоненты не имеют props.theme для стилизованных компонентов с React Router

0 голосов
/ 09 октября 2018 
import {theme} from "./themes";

const App = () => (
  <ThemeProvider theme={theme}>
    <ErrorBoundary showError>
      <Provider store={store}>
        <Router>
          <switch>
            <Route path="/page1" exact component={Page} />
            <Route path="/notfound" component={NotFound} />
          </switch>
        </Router>
      </Provider>
    </ErrorBoundary>
  </ThemeProvider>
export default hot(module)(App);

Теперь в моем компоненте страницы мои реквизиты не включают тему, т.е. реквизиты. Тема не определена

Может кто-нибудь сказать мне, где я ошибаюсь?

Компонент моей страницы имеетРедуктор, расположение, подходящие реквизиты, но без темы

Ответы [ 2 ]

0 голосов
/ 30 января 2019

Как написано в документах :

В дереве визуализации все стилевые компоненты будут иметь доступ к предоставленной теме

и only them!

Это означает, что ваши "нормальные" компоненты не получат объект темы в своих объектах.Мне понадобилось некоторое время, чтобы получить это.Они могли бы написать это немного лучше в документации.

Themeprovider использует response-context api , что означает, что все, что вы добавите туда, будет доступно в this.context.yourVaribaleName ине в реквизите это две разные вещи. (дальнейшее и правильное использование см. В официальном реактивном документе для контекста api (предыдущая ссылка))

Итак, в компоненте страницы вы просто делаете: 

const Button = styled.button`
    font-size: 1em;
    color: ${props => props.theme.main};
    border: 2px solid ${props => props.theme.main};
`;

class Page extends React.Component {
    render(){
     return(<Button>Normal</Button>);
    }
}

(тема props.the в стилевом компоненте не означает, что компоненты, в которых вы будете использовать стилевой компонент, также имеют это в своих реквизитах)

ИЛИ

Если вы хотите, чтобы ваш объект темы находился за пределами стилизованного компонента, в подпрограммах «обычных» компонентов вы должны использовать withTheme HOC.См. документы . (как упоминалось в предыдущем ответе )

0 голосов
/ 10 октября 2018

Чтобы использовать тему на уровне компонента, а не внутри стиля, вам нужно использовать компонент withTheme более высокого порядка.https://www.styled -components.com / документы / апи # withtheme

...