Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

PrimeReact and styled-component

I can't seem to style a PrimeReact component with styled-component.

Given the below code to render an InputText, my intention is to change the width of it. 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;
    }
`;
like image 485
His Avatar asked Sep 18 '17 10:09

His


People also ask

Can I use material UI with styled-components?

Change the default styled engine By default, MUI components come with Emotion as their style engine. If, however, you would like to use styled-components , you can configure your app by following the styled engine guide or starting with one of the example projects: Create React App with styled-components.

Can you use styled-components with SCSS?

SCSS-like Syntax: StylisStylis, a light-weight CSS pre-processor allows styled-components to use SCSS-syntax and Sass features like nesting, name-spacing and more. import React from "react" ; import styled from "styled-component" ; ## Creating a button styled-component that will render a button with some styles.

Is Tailwind styled component?

Tailwind is a utility-first CSS framework for rapidly building custom designs. It can be used alone to style React Apps. However, it can be better combined with Styled Components. That combination brings the magic of Tailwind into CSS-in-JS.

Which is better material UI or styled-components?

Styled Components is similar to Material UI, but gives you the ability to build custom CSS components. Consider Material UI if you want to cut down production time by using a UI library with consistent designs and a vast community behind it.


2 Answers

styled-components generates a className that should be passed to the component.

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:

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;
    }
`;
like image 152
Diego Haz Avatar answered Nov 03 '22 05:11

Diego Haz


PrimeReact has a lot of styles applied with a separate sass stylesheet, often combining multiple classnames and html tags.

To get your styles to win, you need more CSS specificity.

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. More classname specificity needed? Use more &s.

Or you could put in a !important. I've seen this around.

Or edit their sass file.

like image 24
Han Lazarus Avatar answered Nov 03 '22 05:11

Han Lazarus