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