airbnb / react-with-styles

Use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation
MIT License
1.7k stars 95 forks source link

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

Open khvr000 opened 5 years ago

khvr000 commented 5 years ago

My withStyles.js files is :+1:

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 };
khvr000 commented 5 years ago

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);
khvr000 commented 5 years ago

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

ljharb commented 5 years ago

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

khvr000 commented 5 years ago

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 ?

lencioni commented 5 years ago

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