Как я могу сохранить размер шрифта от родителя до потомка на styled-компонентах?

Question

Привет, я только начал использовать Styled-Components.

но немного странная вещь, которую я нашел.

Как вы можете видеть, я не знаю, почему размер шрифта для всех детей по-прежнему составляет 15 пикселей.

Так, как родителям размер шрифта? детям Стихии?

Спасибо.

Answer 1

Добавить inherit в качестве значения по умолчанию:

const Div = styled.div`
  font-size: ${({ fontSize }) => (fontSize ? `${fontSize}px` : `inherit`)};
`;

const App = () => {
  return (
    <>
      <Div fontSize={30}>
        First
        <Div>Second</Div>
      </Div>
      <Div>Default</Div>
    </>
  );
};

Бонус: используйте styled-tools для удаления весь шум:

import { prop } from 'styled-tools';
// fontSize = `30px`
const Div = styled.div`
  font-size: ${prop(`fontSize`,`initial`);
`;

Answer 2

Как насчет этого? <Div fontSize='inherit'>Second</Div>