PrimeReact 和样式组件
PrimeReact and styled-component
我似乎无法使用 styled-component 设置 PrimeReact 组件的样式。
鉴于下面的代码呈现一个 InputText,我的目的是改变它的宽度。但是没用。
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
生成应传递给组件的 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;
}
`;
如果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 有很多样式应用了单独的 sass 样式表,通常结合多个类名和 html 标签。
要让您的风格获胜,您需要更多 CSS 特异性。
一种解决方案是使用嵌套选择器,例如:
const ComponentView = styled(Component)`
&&& {
width: 1000px;
}`
这将生成 3 个相同的类名,Styled Components docs 推荐。需要更多的类名特异性?使用更多 &
s.
或者您可以输入 !important
。这个我见过。
或编辑their sass file.
我似乎无法使用 styled-component 设置 PrimeReact 组件的样式。
鉴于下面的代码呈现一个 InputText,我的目的是改变它的宽度。但是没用。
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
生成应传递给组件的 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;
}
`;
如果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 有很多样式应用了单独的 sass 样式表,通常结合多个类名和 html 标签。
要让您的风格获胜,您需要更多 CSS 特异性。
一种解决方案是使用嵌套选择器,例如:
const ComponentView = styled(Component)`
&&& {
width: 1000px;
}`
这将生成 3 个相同的类名,Styled Components docs 推荐。需要更多的类名特异性?使用更多 &
s.
或者您可以输入 !important
。这个我见过。
或编辑their sass file.