react-with-styles icon indicating copy to clipboard operation
react-with-styles copied to clipboard

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

Open khvr000 opened this issue 6 years ago • 5 comments

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 avatar Jul 28 '19 17:07 khvr000

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 avatar Jul 28 '19 17:07 khvr000

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

khvr000 avatar Jul 28 '19 17:07 khvr000

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

ljharb avatar Jul 29 '19 03:07 ljharb

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 ?

khvr000 avatar Jul 29 '19 12:07 khvr000

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

lencioni avatar Jul 29 '19 15:07 lencioni