npm i react-theme-components
import { Button } from 'react-theme-components'
...
render() {
return (
<Button>This is a button</Button>
);
};
import { Button } from 'react-theme-components'
...
render() {
return (
<Button
style={{
color: 'red'
}}
>This is a button</Button>
);
};
Property | Default | Type | Values |
---|---|---|---|
color | #ffffff |
String | hex, rgb |
fontSize | 16px |
String, Number | font-size values |
backgroundColor | #1890ff |
String | hex, rgb |
borderColor | #1890ff |
String | hex, rgb |
Property | Default | Type | Values |
---|---|---|---|
height | 32px |
String, Number | height values |
color | rgba(0,0,0,0.65) |
String | hex, rgb |
fontSize | 14px |
String, Number | font-size values |
backgroundColor | #ffffff |
String | hex, rgb |
borderColor | #d9d9d9 |
String | hex, rgb |
Property | Default | Type | Values |
---|---|---|---|
color | #0d1a26 |
String | hex, rgb |
fontSize | 30px |
String, Number | font-size values |
import { Button, Title, Provider } from 'react-theme-components'
...
render() {
return (
<Provider theme={{
Button: {
color: 'red'
},
Title: {
color: 'red'
}
}}>
<Button>This is a button</Button>
<Title>This is a Title</Title>
</Provider>
);
};
Property | Default | Type | Values |
---|---|---|---|
color | #ffffff |
String | hex, rgb |
fontSize | 16px |
String | font-size values |
backgroundColor | #1890ff |
String | hex, rgb |
borderColor | #1890ff |
String | hex, rgb |
hoverBackgroundColor | #40a9ff |
String | hex, rgb |
hoverBorderColor | #40a9ff |
String | hex, rgb |
hoverColor | #ffffff |
String | hex, rgb |
Property | Default | Type | Values |
---|---|---|---|
height | 32px |
String | height values |
color | rgba(0,0,0,0.65) |
String | hex, rgb |
fontSize | 14px |
String | font-size values |
backgroundColor | #ffffff |
String | hex, rgb |
borderColor | #d9d9d9 |
String | hex, rgb |
hoverBorderColor | #40a9ff |
String | hex, rgb |
Property | Default | Type | Values |
---|---|---|---|
color | #0d1a26 |
String | hex, rgb |
fontSize | 30px |
String | font-size values |