我正在学习React,开始使用styled-components
和react-router dom
。
但是我面临着一个难题,即如何将我自定义的样式组件应用到由他人创建的现有组件上。
以下是代码:
import React from "react";
import { NavLink } from "react-router-dom";
import styled from "styled-components";
const NavStyle = styled.div`
color: red;
margin: 10px;
`;
const Navigation = () => {
return (
<div>
<NavStyle>
<NavLink to="/">Home</NavLink>
</NavStyle>
<NavLink to="/about">About</NavLink>
<NavLink to="/contact">Contact</NavLink>
</div>
);
};
export default Navigation;
问题在于视图中未应用 color: red
,但应用了 margin: 10px
。为什么会这样?
${props => props.theme.colors.primary}
} minimumTrackTintColor={${props.theme.colors.primary}
} maximumTrackTintColor={${props.theme.colors.primary}
} />const StyledSlider = styled(Slider)` 这里可以放什么? - yazmnh87