стилизованные компоненты - передача реквизита в GlobalStyle

У меня есть GlobalStyle с некоторыми заменами, например:

const GlobalStyle = createGlobalStyle`
  h6 {
    font-weight: ${props => (props.semibold ? 600 : "bold")};
    font-size: 16px;
  }
  ...
`;

Я хотел бы передать свойства моих компонентов в GlobalStyle, например. масса. Примерно так (из JSX):

const LocalComponent = () => {
  return (
    <div>
      <h6 semibold>This should be semi-bold text</h6>
    </div>
  );
};

приведенный выше пример не работает. Но есть ли способ добиться этого?
В настоящее время я оборачиваю h6 в другой SC и добавляю вес шрифта локально. Было бы намного лучше иметь его в глобальном масштабе без необходимости создавать другой компонент, просто как оболочку для полужирного текста и т. Д.


reactjs styled-components
person kl123    schedule 07.07.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

На основании приведенной выше информации неясно, какая часть отсутствует.

Я предполагаю, что вы добавили the <ThemeProvider theme={your_theme} /> в качестве оболочки для своего приложения (например, <App />). Это добавит реквизиты во все ваши стилизованные компоненты, если они являются дочерними элементами <App />.

  <ThemeProvider theme={your_theme}>
     <GlobalStyle />
     <App />
  </ThemeProvider>

Не забудьте добавить компонент <GlobalStyle /> в качестве дочернего к ThemeProvider, иначе свойства не будут заполнены.

person George Moringer    schedule 10.11.2020