airbnb / react-with-styles

Use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

how to get styles object into class type component that extends React.component

khvr000 opened this issue Β· comments

My withStyles.js files is πŸ‘

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
import { css, withStyles } from 'react-with-styles';

import MyDefaultTheme from './MyDefaultTheme';

ThemedStyleSheet.registerTheme(MyDefaultTheme);
ThemedStyleSheet.registerInterface(aphroditeInterface);

export { css, withStyles, ThemedStyleSheet };

My component is

import  React from "react";
import {css, withStyles} from "react-with-styles";

export class InputForm extends React.Component {

    constructor() {
        super()
    }

    render() {

        return (
                        <div className={"row"} style={{float:"left", clear:"both"}}>
                            <form  id="nameform">
                                First name: <input type="text" name="fname"></input>
                                Last name: <input type="text" name="lname"></input>
                            </form>
                                <button  {...css(styles.firstLink)} onClick={onClick}>Button</button>
                        </div>
        );
    }
}


export default withStyles(({ color }) => ({
    firstLink: {
        color: color.primary,
    },

    secondLink: {
        color: color.secondary,
    },
}))(InputForm);

Where should I import or get the styles Object to use in my component .Please help me as I do want to change this functional component or forgive me if didnt understand the basics well @lencioni

It's passed in as a prop by withStyles - check this.props.styles in InputForm.

Thank you very much ! @ljharb I am trying to implement this article, but unable to find the ThemeProvider from 'react-with-styles' library , can you please help me with this ? @lencioni , Also cant find the registerDefaultTheme method on ThemedStyleSheet, Can we define our own provider to make the theme available in the whole app ?

That page appears to be outdated. The readme is a better resource for you at this time https://github.com/airbnb/react-with-styles/blob/master/README.md