I am not able to change the style to PickList and DatePickerModal
Yusseiin opened this issue · 4 comments
Hi all, (sorry for bad English)
I am trying to change the color of a PickList and DatePickerModal. Referring to the guides, it says to use "RainbowThemeContainer" to change the appearance, but in my case, it is not working. I cannot use "Application" to change the theme because it will change the entire page, and I only want to style these two components. If I use variant="inverse", it changes every color, but I am not able to change it as I prefer. This is my code:
import React, { useState } from 'react';
import { Box } from "@mui/material";
import { Picklist, Option, DatePickerModal, RainbowThemeContainer } from 'react-rainbow-components';
import dayjs from 'dayjs';
const Daily = () => {
const [isOpen, setOpen] = useState();
const [dates, setDates] = useState(dayjs().format('YYYY/MM/DD'));
const [selection, setSelection] = useState(dayjs().format('DD/MM/YYYY'));
const containerStyles = {
width: '300px',
};
const theme = {
rainbow: {
palette: {
main: "#ff0000",
dark: "#ff0000",
light: "#ff0000",
},
background: {
main: "#000000",
highlight: "#000000",
secondary: "#000000",
disabled: "#000000",
}
},
};
const Today = dayjs().format('DD/MM/YYYY');
const Yesterday = dayjs().add(-1, 'day').format('DD/MM/YYYY');
const Week = 'From ${dayjs().add(-dayjs().day(), 'day').format('DD/MM/YYYY')} to ${dayjs().add(+7-dayjs().day(), 'day').format('DD/MM/YYYY')}' ;
function handlePicklistChange(value) {
if (value.name === 'Custom') {
setOpen(true);
//setDates();
}
else {
setSelection(value.value);
console.log('value', value)
}
}
function formatDates(dates) {
if (dates) {
const startDay = new Intl.DateTimeFormat().format(dates[0]);
if (dates.length > 1) {
const endDay = new Intl.DateTimeFormat().format(dates[1]);
return 'From ${startDay } to ${ endDay}';
}
return startDay;
}
return '';
}
function handleDatePickerChange(value) {
const formatedDate = formatDates(value);
setDates(value);
setSelection(formatedDate);
}
return (
<Box m="1.5rem 2.5rem">
<RainbowThemeContainer theme={theme}>
<Picklist
value={selection}
placeholder={selection}
onChange={handlePicklistChange}
style={containerStyles}
//variant="inverse"
>
<Option name="Custom" label="Custom" />
<Option name="Today" label="Today" value = {Today} />
<Option name="Yesterday" label="Yesterday" value = {Yesterday}/>
<Option name="This Week" label="This Week" value = {Week}/>
</Picklist>
<DatePickerModal
title='Select a Date'
isOpen={isOpen}
variant="double"
value={dates}
selectionType="range"
onChange={handleDatePickerChange}
onRequestClose={() => {setOpen(false); handleDatePickerChange(dates)}}
/>
</RainbowThemeContainer>
</Box>
)
};
export default Daily
This is the result
Can someone help me?
Hi @Yusseiin
You need to pass theme in this way:
const theme = {
rainbow: {
palette: {
brand: "#ff0000",
success: "",
mainBackground: "",
..
},
},
};
Here there is doc about how to use it:
https://react-rainbow.io/#/Customization
Hi @Yusseiin
You need to pass theme in this way:
const theme = { rainbow: { palette: { brand: "#ff0000", success: "", mainBackground: "", .. }, }, };Here there is doc about how to use it: https://react-rainbow.io/#/Customization
There is that part in my code:
const theme = {
rainbow: {
palette: {
main: "#ff0000",
dark: "#ff0000",
light: "#ff0000",
},
background: {
main: "#000000",
highlight: "#000000",
secondary: "#000000",
disabled: "#000000",
}
},
};
And then i recall it here:
<RainbowThemeContainer theme={theme}>
<Picklist
value={selection}
placeholder={selection}
onChange={handlePicklistChange}
style={containerStyles}
//variant="inverse"
>
<Option name="Custom" label="Custom" />
<Option name="Today" label="Today" value = {Today} />
<Option name="Yesterday" label="Yesterday" value = {Yesterday}/>
<Option name="This Week" label="This Week" value = {Week}/>
</Picklist>
<DatePickerModal
title='Select a Date'
isOpen={isOpen}
variant="double"
value={dates}
selectionType="range"
onChange={handleDatePickerChange}
onRequestClose={() => {setOpen(false); handleDatePickerChange(dates)}}
/>
</RainbowThemeContainer>
but is not changing the color
@LeandroTorresSicilia i think i have found the problem.
in the wiki "https://react-rainbow.io/#/Customization" it says to use background: {
, but the correct one is mainBackground:
.
For changing the text color what is the correct one? is says text
but is not working. I have tryed with
titleText: theme.palette.secondary[200],
mainText: theme.palette.secondary[200],
titleText: theme.palette.secondary[200],
headerText: theme.palette.secondary[200],
labelText: theme.palette.secondary[200],
disabledText: theme.palette.secondary[200],
but no one is working
@Yusseiin Right now we don't support changing the text color, you can only change these ones:
Using the code as I said above.
Here is a code sandbox: https://codesandbox.io/s/quirky-dew-rzxj7t?file=/src/App.js