Измените компонент реакции css с помощью стилизованного компонента
Я использую какой-то компонент из библиотеки, которого нет в моем репозитории проекта. Поскольку я использую styled-component для разработки собственного компонента. Я хочу внести небольшие изменения в компонент, который я использую из другой библиотеки, не касаясь базы кода. Вот небольшой пример того, чего я пытаюсь достичь, но ни один из следующих стилей не применяется к CustomCom.
Библиотека пользовательского интерфейса
const CustomCom = ()=>{
return (
<div>Child</div>
);
}
Мое репо
export default styled(CustomCom)`
height: 20px;
background: green;
`;
Ответы 2
Это возможно только в том случае, если компонент передает className элементу DOM, согласно документации styled-components.
The styled method works perfectly on all of your own or any third-party components, as long as they attach the passed className prop to a DOM element.
https://www.styled-components.com/docs/basics#styling-any-components
Вот пример кода, который, конечно, изменяет код библиотеки, что, как я понимаю, вы не можете сделать, но вы можете создать вилку библиотеки и сделать это, если хотите.
const CustomCom = ({className})=>{
return (
<div className = {className}>Child</div>
);
}
class App extends Component {
render() {
const MyElem = styled(CustomCom)`
height: 20px;
background: green;
`
return (
<MyElem />
);
}
}
Попробуйте ниже
export const newCustom = styled(CustomCom)`
height: 20px;
background: green;
`;
Теперь используйте этот пользовательский компонент
<newCustom />
Если вы хотите расширить существующие HTML-теги, вы можете сделать это:
export const newCustom = styled.div`
height: 20px;
background: green;
`;
Это именно тот код, который у них есть в их вопросе, и он не решает проблему, которую они имеют, которая использует
styled-componentsна стороннем компоненте, который не передаетclassName.