I am using const in my material-UI theme in order to define colors
for example
const tableHeader=grey[400]
in order to use semantic constant names I want to create several constants and give them the same color
for example somthing like
const tableHeader, borderDefault = grey[400]
is there any such way
(the eaxmple above don't work)
apart from Maryja Piaredryj answer, there's another way. Store these colors in the material-UI theme, and then use this using makeStyles or useTheme.
const theme = createMuiTheme({
custom: {
palette: {
borders: grey[400]
}
}
});
Now use this in makeStyles as a regular theme property
const useStyles = makeStyles((theme) => ({
borderStyle:{
borderColor:theme.custom.palette.borders;
}
}));
Unfortunately, you should assign value to every variable separately.
But you can think of choosing another data structure to store color variables, smth like
const THEME = {
borders: grey[400]
}
const tableHeader = THEME.borders;
const borderDefault = THEME.borders;
Related
How to change/customize the default color of selected rows in a Material-UI table (of type Sorting & Selecting)? By default it is secondary (red) color (Codesandbox here: https://codesandbox.io/s/3sjxh). How to change it to a custom color, or at least to primary (blue), as it appears in the new beta version (https://next.material-ui.com/components/tables/#main-content) (v5).
You have to pass your styles to the classes props in order to change the styles for the TableRow.
To achieve the background-color change you want to override the default classes: .MuiTableRow-root.Mui-selected and .MuiTableRow-root.Mui-selected:hover.
To override them you have to use a parent reference with a so called $ruleName in your makeStyles hook. Here is a very good explanation from #Ryan Cogswell if you are more interested how it works.
This would then look like this:
const useStyles = makeStyles((theme) => ({
// your other styles
...,
tableRowRoot: {
"&$tableRowSelected, &$tableRowSelected:hover": {
backgroundColor: theme.palette.primary.main
}
},
tableRowSelected: {
backgroundColor: theme.palette.primary.main
}
}));
...
<TableRow
// your other props
...
classes={{
root: classes.tableRowRoot,
selected: classes. tableRowSelected,
}}
>
...
</TableRow>;
For the checkboxes, you only have to add the color prop in order to change it:
<Checkbox
// other props
...
color="primary"
/>
and for your Toolbar, you only need to change the provided highlight class inside your useToolbarStyles in order to get things working:
import { alpha } from "#material-ui/core/styles";
...
const useToolbarStyles = makeStyles((theme) => ({
...,
highlight:
theme.palette.type === "light"
? {
color: theme.palette.primary.main,
backgroundColor: alpha(
theme.palette.primary.light,
theme.palette.action.selectedOpacity
)
}
: {
color: theme.palette.text.primary,
backgroundColor: theme.palette.primary.dark
},
}));
Live demo:
The way I currently save my design template (colors, constraints, sizes...) in flutter projects is by creating a file called: style_constants.dart in lib/theme/ This is for instance how the file could look like:
import 'package:flutter/material.dart';
const Color colorShade1 = Color(0xFFEFF0F2);
const Color colorShade2 = Color(0xFF777777);
const Color colorShade3 = Color(0xFF424242);
const Color colorShade4 = Color(0xFF4B4935);
const Color colorShade5 = Color(0xFF3D2916);
const Color colorShade6 = Color(0xFF1D1C0A);
const Color colorBackground = Color(0xFF101A24);
const Color colorPrimary1 = Color(0xFFCC9757);
const Color colorRed = Color(0xFFEB5757);
// TabBar
const double kTabIconHeight = 28;
// CTA
const double kCtaHeight = 52;
const double kCtaWidth = 358;
const Color colorCtaBackground = Colors.white;
const TextStyle ktsCta = TextStyle(color: colorRed, fontSize: 19, fontWeight: FontWeight.w700);
The way I'm doing it works, HOWEVER it is most probably NOT the best way to do it. I found on the official dart page that it would be better to do it this way:
class Color {
static const red = '#f00';
static const green = '#0f0';
static const blue = '#00f';
static const black = '#000';
static const white = '#fff';
}
I tried to incorporate it but somehow did NOT work. Can you please show me the best-practice in terms of saving your own design a.k.a. CSS template?
I see 2 issues with your way of implementing your Color class. First is that your class has the same typo as the material Color from flutter which might cause conflicts when adding it into a file where the package material.dart is also imported. The second one is more of a personal taste, I am not a big fan of using HEX color format as flutter Color constructor takes an int as its parameter. On my projects I am saving my colors like this:
class MyColors {
static const someRed = Color(0xFFFF6666);
static const someGreen = Color(0xFF24B356);
// etc...
}
The conversion from HEX to int is quite easy, you only need to replace the # by 0xFF. For example a color static const hexSomeBlue = "#8d91b8"; will became static const someBlue = Color(0xFF8d91b8);
Is it possible to override the default style of a particular Material UI component style? Let's say I want have different types of MuiButton's...
<Button color="primary" variant="contained">Foo</Button>
<Button variant="text">Foo</Button>
With the default styles the first button will have a white text color and the second one will have a black text color. If I would like to change the text color default globally (which in this case I won't) I should use the following options for createMuiTheme:
const options = {
overrides: {
MuiButton: {
root: {
color: 'white',
}
}
}
};
However in this case I would only like to change the text color of the primary colored and contained variant button. How do I do this?
From the documentation it was not very clear to me but apparently you can target different classes in the component like so:
const options = {
overrides: {
MuiButton: {
containedPrimary: {
'& > .MuiButton-label': {
color: 'white'
},
}
}
}
};
Hello i want to put a style opacity:0.3 on img
<ion-content [style]="getBackgroundImg()">
getBackgroundImg() {
const img = this.mediaDetails.image_path;
const style = `background-image: url(${img}); `;
return this.sanitizer.bypassSecurityTrustStyle(style);
}
Note: i want put opacity only on const img not on the whole ion-content. It doesnt take the opacity in the object
You can add the opacity property in a style e.g.
const style = `background-image: url(${img}); opacity:0.3 `;
Simply need to use withStyles some how to edit the default color from the primary/error color to simply just use black. But since the update from 0.19.0 to beta 1 this doesn't seem possible now.
The error message (the one under the text input) is using the object under theme.palette.error (see source) to choose which color to use.
That same palette color is used for the text field label too.
If you want to change both at the same time the right approach would be to use a custom theme that rewrites the theme.palette.error to something else.
import { createMuiTheme, createPalette } from 'material-ui/styles';
import grey from 'material-ui/colors/grey';
const theme = createMuiTheme({
palette: createPalette({
error: grey
})
});
If you want to change just the FormHelperText color then you could customize it in theme by using the overrides parameter.
const theme = createMuiTheme({
overrides: {
MuiFormHelperText: {
error: {
color: 'black'
}
}
}
});
To change the Label of the TextField in the current version (v1.2.1)
You have to set the the color like this:
const theme = createMuiTheme({
palette: {
text: {
secundary: 'black'
}
}
}
});
for error the path is palette.error.main
the easiest way to find the right variables is to look directly into the code