[英]PrimeReact and styled-component
I can't seem to style a PrimeReact component with styled-component. 我似乎无法使用样式组件设置PrimeReact组件的样式。
Given the below code to render an InputText, my intention is to change the width of it. 给出下面的代码来渲染InputText,我的目的是改变它的宽度。 But it doesn't work.
但它不起作用。
import styled from "styled-components";
import {InputText} from 'primereact/components/inputtext/InputText';
class Component extends React.Component {
render() {
return (
<InputText/>
)
}
const ComponentView = styled(Component)`
.ui-inputtext {
width: 1000px;
}
`;
styled-components
generates a className
that should be passed to the component. styled-components
生成一个应该传递给组件的className
。
import styled from "styled-components";
import {InputText} from 'primereact/components/inputtext/InputText';
class Component extends React.Component {
render() {
return (
<InputText className={this.props.className} /> <---- here
)
}
const ComponentView = styled(Component)`
.ui-inputtext {
width: 1000px;
}
`;
If InputText
doesn't accept className
, you can simply wrap it with another component: 如果
InputText
不接受className
,您只需使用另一个组件包装它:
import styled from "styled-components";
import {InputText} from 'primereact/components/inputtext/InputText';
class Component extends React.Component {
render() {
return (
<div className={this.props.className}> <---- here
<InputText />
</div>
)
}
const ComponentView = styled(Component)`
.ui-inputtext {
width: 1000px;
}
`;
PrimeReact has a lot of styles applied with a separate sass stylesheet, often combining multiple classnames and html tags. PrimeReact有很多样式应用了单独的sass样式表,通常结合多个类名和html标签。
To get your styles to win, you need more CSS specificity. 为了让你的风格获胜,你需要更多的CSS特性。
A solution is to use a nested selector, like: 解决方案是使用嵌套选择器,如:
const ComponentView = styled(Component)`
&&& {
width: 1000px;
}`
This will generate 3 identical classnames and is recommended by the Styled Components docs . 这将生成3个相同的类名,并由Styled Components文档推荐。 More classname specificity needed?
需要更多classname特异性? Use more
&
s. 使用更多
&
s。
Or you could put in a !important
. 或者你可以放入
!important
。 I've seen this around. 我见过这个。
Or edit their sass file . 或者编辑他们的sass文件 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.