Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
khvr000 opened this issue Jul 28, 2019 · 5 comments

Comments

@khvr000
Copy link

khvr000 commented Jul 28, 2019

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 };
@khvr000
Copy link
Author

khvr000 commented Jul 28, 2019

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
Copy link
Author

khvr000 commented Jul 28, 2019

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
Copy link
Collaborator

ljharb commented Jul 29, 2019

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

@khvr000
Copy link
Author

khvr000 commented Jul 29, 2019

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
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants