Где ошибка в коде?

Question

[Дарья ннн]

стили для a line-height и font-weight работают неправильно, типа они как бы есть в инспекторе, но на деле стили не применились

вот файл menu

import MenuItems from "./MenuItems/MenuItems";

const styles = {
wrapper: {
display: "flex",
justifyContent: "center",
},
};

const Menu = () => {
const renderList = [
{
id: "one",
marginRight: "60px",
text: "главная",
},
{
id: "two",
marginRight: "60px",
text: "знания",
},
{
id: "three",
text: "главная",
},
];
return (
<div style={styles.wrapper}>
<MenuItems renderList={renderList} />
</div>
);
};

export default Menu;

файл MenuItems

import MenuItem from "./MenuItem/MenuItem";

const styles = {
nav:{
display: "flex"
}
}

const MenuItems = ({ renderList }) => {
return (
<nav style={styles.nav}>
{renderList.map(({ id, marginRight, text}) => (
<MenuItem text={text} id={id} key={id} marginRight={marginRight}/>
))}
</nav>
);
};

export default MenuItems;

MenuItem

import styled from "styled-components";

const Li = styled.li`
margin-right: ${({ marginRight }) => marginRight};
text: ${({ text }) => text};
font-size: ${({ fontSize }) => fontSize};
line-height: ${({lineheight }) => lineheight};
font-weight: ${({fontWeight }) => fontWeight};
`;

const MenuItem = ({ text = "контент ", marginRight = "0px", fontSize = "200px", fontWeight= "600"}) => {
return (
<Li marginRight={marginRight}>
<a fontSize={fontSize} fontWeight={fontWeight} href="/#">{text}</a>
</Li>
);
};

export default MenuItem;

Answer 1

[Антон Горецкий]

у вас в этой строке
line-height: ${({lineheight }) => lineheight};
написан код - взять из пропсов lineheight и применить к свойству line-height
а в этой строке
<Li marginRight={marginRight}>
вы передаете в пропсы только marginRight, так откуда взяться свойству line-height? Значение по умолчанию вы тоже не задали.