Material UI's Button component renders a relatively straightforward button element with a background color which we can see in a web inspector.
But when we examine this with getComputedStyle in a testing-library/react render, the reported color is 'transparent'.
Is there a way to test the button's background color?
For example, if a component returns:
<Button data-testid="blah" variant="contained" color="primary">
hi
</Button>
It creates a blue button (#3f51b5) with the default theme. But this test:
it("renders with the correct background color", () => {
const { getAllByTestId } = render(<App />);
const button = getAllByTestId("blah")[0];
const buttonStyle = window.getComputedStyle(button);
const backgroundColor = buttonStyle["background-color"];
expect(backgroundColor).toEqual("#3f51b5");
});
Fails with
Expected: "#3f51b5"
Received: "transparent"
Codesandbox link
Got an answer to this on GitHub, but long story short, this is a consequence of how JSDOM works. The "solution" is to test this with something like Cypress, not Testing Library. ¯\_(ツ)_/¯
Related
I want to change Chip's background color when it's variants value is 'filled' because the default light gray doesn't feel satisfactory.
I read MUI docs and Chip API but it's too complicated for me..
You could make use of Chip's exported CSS classes
import Chip, { chipClasses } from "#mui/material/Chip";
import { styled } from "#mui/material/styles";
// ..
const CustomChip = styled(Chip)({
[`&.${chipClasses.filled}`]: {
backgroundColor: "red"
}
});
Codesandbox demo
const GreenCheckbox = withStyles({
root: {
color: green[400],
'&$checked': {
color: green[600],
},
},
checked: {},
})(props => <Checkbox color="default" {...props} />);
Detailed code please see CodeSandbox.
we call this selector and one of them is checked and that means that this radio button or check is checked and when its check we do what we want and in your position we make green color darker
There was an issue requesting documentation for theming which the author subsequently closed. The author found their answer. A non-programmer will probably not. At least, the non-programmer designer I'm helping doesn't even know where to start (and I still don't have a working different colored slider). This kind of documentation would be great. Even if it's just a link to the code #jdelafon found with some explanation that would suffice to answer the following specific example.
Ultimately, we want a set of sliders with each one a different color. It seems like the appropriate way to do this is with per-element inline styles.
I made a simple example here. Can you change the color of the slider? (We started down the path of breaking out to CSS, but the widget is so dynamic that this approach ends up being quite ugly.)
Slider has two different slots for theming, neither of which seems to respond to an embedded object with a selectionColor key.
Should be simple. Probably it is, but it appears to be undocumented. Otherwise it's a rad UI toolkit, thanks devs!
Take a look at this line of getMuiTheme.js. You can find there that slider can have those styles overridden:
{
trackSize: 2,
trackColor: palette.primary3Color,
trackColorSelected: palette.accent3Color,
handleSize: 12,
handleSizeDisabled: 8,
handleSizeActive: 18,
handleColorZero: palette.primary3Color,
handleFillColor: palette.alternateTextColor,
selectionColor: palette.primary1Color,
rippleColor: palette.primary1Color,
}
In material-ui you need to use MuiThemeProvider in order to use your custom theme. Taking your example:
...
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { Slider } from 'material-ui';
const theme1 = getMuiTheme({
slider: {
selectionColor: "red",
trackSize: 20
}
})
const theme2 = getMuiTheme({
slider: {
selectionColor: "green",
trackSize: 30
}
})
const HelloWorld = () => (
<div>
...
<MuiThemeProvider muiTheme={theme1}>
<Slider defaultValue={0.5}/>
</MuiThemeProvider>
<MuiThemeProvider muiTheme={theme2}>
<Slider defaultValue={0.5}/>
</MuiThemeProvider>
</div>
);
export default HelloWorld;
Your modified webpackbin: http://www.webpackbin.com/EyEPnZ_8M
The sliderStyle you tried to use is for different styles :-) Like marginTop / marginBottom, a full list can be found here.
I followed the steps in this link to change the background color material-ui --> Date Picker dialog by changing the theme. Changing the theme changed background color but it did not change the color of the OK and CANCEL buttons.How to change the color of OK and CANCEL buttons?
You have two options to customize the color of the OK and Cancel buttons.
(Easier) If you are okay with all flat buttons in your application using same, customized color you want to use on your Date Picker buttons, then you can simply add
flatButton: {
primaryTextColor: purple500, // Whatever color you want.
}
to the object you are passing into your getMuiTheme() call.
If you are only customizing the button colors in this situation, and want the other Flat Buttons in your application to take the theme's color, then you need to customize the muiTheme right before the DatePicker is used.
So if we wanted to have all of our Flat Buttons to be cyan500, then we would set that at our main
const mainMuiTheme = getMuiTheme({
flatButton: { primaryTextColor: cyan500 }
})
const WrapperWithMainThemeProvider = (props) => {
return (
<MuiThemeProvider muiTheme={mainMuiTheme}>
<MyDatePicker />
</MuiThemeProvider>
)
}
Then if wanted the buttons in our DatePicker to be customized, then we do that in a custom component.
class MyDatePicker extends React.class {
render() {
const muiTheme = getMuiTheme({
...this.context.muiTheme,
flatButton: {
primaryTextColor: purple500,
}
})
// Customize the muiTheme, and pass it down in a new MuiThemeProvider.
// Only Flat Buttons that are children of this component
// will have the new color.
return (
<MuiThemeProvider muiTheme={muiTheme}>
<DatePicker />
</MuiThemeProvider>
)
}
}
MyDatePicker.contextTypes = {
muiTheme: React.PropTypes.object.isRequired
}
Material-UI uses Flatbutton as default on datepicker or for any dialog. Which means the OK/CANCEL button you see on datepicker is nothing but a flatbutton. So to apply background color to OK/CANCEL button of Date picker you have to use color instead of primaryTextColor. The color attribute of flatbutton does change the button background color. Please find example below and Screenshot here
import DatePicker from 'material-ui/DatePicker';
const mainMuiTheme = getMuiTheme({
flatButton: { color: '#333' }
})
const WrapperWithMainThemeProvider = (props) => {
return (
<MuiThemeProvider muiTheme={mainMuiTheme}>
<DatePicker
floatingLabelText="Date Of Birth"
hintText="Select Date Of Birth"
container="inline"
locale="en-US"
firstDayOfWeek={0}
autoOk={true}
value={this.state.dob}
onChange={this.changeDateOfBirth}
defaultDate={this.state.dateYesterday}
>
</DatePicker>
</MuiThemeProvider>
)
}
And below is what Material-UI expects muiTheme styles for FlatButton.
flatButton: {
color: transparent,
buttonFilterColor: '#999999',
disabledTextColor: fade(palette.textColor, 0.3),
textColor: palette.textColor,
primaryTextColor: palette.primary1Color,
secondaryTextColor: palette.accent1Color,
fontSize: typography.fontStyleButtonFontSize,
fontWeight: typography.fontWeightMedium,
}
For more information about muiTheme styles of each material-UI component check the following link https://github.com/mui-org/material-ui/blob/master/src/styles/getMuiTheme.js
I tested this and it worked for me. Hope this answer helpful.
I posted this on the Ionic forum, but I never seem to have luck on their forums, so I thought I'd try here.
I'd like to have options for a "dark" and "light" theme that a user can choose in their settings. What's the best way to go about that? Can I programmatically switch between ionic themes, like dark and stable?
Thanks in advance.
You can you ng-style to pass a css options object to an element. This will toggle font color on the element. Following this pattern you would have dark and light theme objects that you toggle between.
<div ng-style="style" class="item">
This is a basic Card.
<button ng-click="toggle()">Toggle</button>
</div>
And in your controller
.controller('AppCtrl', function($scope) {
$scope.style = {
color: '#000'
};
$scope.toggle = function() {
$scope.style.color = ($scope.style.color === '#000' ? '#fff' : '#000');
};
});
Demo
Here is a simple example where you want to change the color of your header dynamically:
<ion-header-bar ng-class="'bar-' + appTheme">
<h1 class="title">Ionic - Switch Themes</h1>
</ion-header-bar>
In your controller:
var selectedTheme = $window.localStorage.appTheme;
if (selectedTheme) {
$scope.appTheme = selectedTheme;
} else {
$scope.appTheme = 'positive';
}
$scope.themeChange = function (theme) {
// save theme locally
$window.localStorage.appTheme = theme;
// reload
$window.location = '';
}
Live demo and full example #: http://techiedreams.com/ionic-custom-and-dynamic-theming/