I'm looking for a solution to edit the style of my material ui form.
I would like to change the background and the border.
I try to change directly in CSS :
input { background:#999; }
But it change the background of all the div (https://www.awesomescreenshot.com/showImage?img_id=3537926)
I'm using Redux Form with Material UI : https://redux-form.com/7.4.2/examples/material-ui/
The material-ui way - in your jsx file with the form, you can define a theme which includes classNames
import classNames from "classnames";
....
const styles = theme => ({
form_input: {
background: "#999"
},
....
Then, in your form or enclosed div tag, include something like...
className={classes.form_input}
Related
I have a custom spinner that is currently using keyframes like so:
import { keyframes } from "#mui/system";
...
const keyframeSpinner = keyframes`
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
`;
...
<Box
sx={{
animation: `${keyframeSpinner} 1s linear infinite`,
}}
/>
...
I don't want to import #mui/system and I don't want to use styled components.
So, I'm trying to find a solution where I can uses pure css or another solution that I'm unaware of.
You can easily apply in-line CSS styles to components using emotion, which is also used by MUI.
For example, here is the css prop from emotion being used to customize background-color and hover on a div. The code you write in the css prop can be pure CSS.
import { css, jsx } from '#emotion/react'
const color = 'darkgreen'
const customCss = css`
background-color: hotpink
&:hover { color: ${color} }
`
render(
<div css = {customCss}>
This div has a hotpink background.
</div>
)
For example:
import { CssBaseline, ThemeProvider, Typography } from "#material-ui/core"; // MUI **Typography** component
import { Text, RichText } from "#some-library/core"; // some-library's **Text** component
const theme = createMuiTheme({
overrides: {
typography: {
h1: {
fontFamily: Garamond,
fontSize: pxToRem(56),
lineHeight: pxToRem(64),
letterSpacing: pxToRem(-0.5),
[breakpoints.up("sm")]: {
fontSize: pxToRem(72),
lineHeight: pxToRem(76)
},
[breakpoints.up("md")]: {
fontSize: pxToRem(104),
lineHeight: pxToRem(112)
},
[breakpoints.up("lg")]: {
fontSize: pxToRem(120),
lineHeight: pxToRem(128),
letterSpacing: pxToRem(-0.75)
}
}
}
}
});
function App() {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Typography variant="h1">MUI Typography Heading</Typography>
<Text tag="h1">Library B text component</Text>
</ThemeProvider>
);
}
All I want is to apply the same styles of the <Typography> for the <Text> component.
I know can I can add className to the other component like <Text className={"MuiTypography-root MuiTypography-h1"} tag="h1">. Is that the right approach? And if I do like this would the props of components also be used in the component? Like <Text variant="h2"> and would it take all the responsiveness of Typography too?
Can the styles of MUI component be extended to another react component with all the other functionality (props etc) using any other way?
I am trying to create a shared (MUI components + some-library components) component library and using MUI as the base library for components and styles. And I have created custom theme for the MUI components but not able to extend these styles to the components of another library which too has few basic components (text field, buttons, form elements etc).
Please let know if the question makes sense as I am very new to react and MUI. Thanks much.
Ciao, for what I know, the answer should be no: you cannot extend material-ui component style to another component from different library. Because a component from another library would not accepts the same Material UI props (in your example, variant="h1" would be not recognized as valid props in other component except Material UI components).
Of course, as you said, you could assign the same Material UI class to another component and that component will follow the same style:
<Text className={"MuiTypography-root MuiTypography-h1"} tag="h1"> // this work
Or you could extend a Material UI component. Suppose that you want to make your own Text, you could extend Typography component using withStyles like:
import { withStyles } from "#material-ui/core/styles";
const MyText = withStyles((theme) => ({
root: {
color: "green" // in this case, MyText will have a green text color
}
}))((props) => <Typography {...props} />);
But, as you can see, I extended a Typography component, not a component coming from another library. Here a codesandbox example.
As I said, this is what I know. Maybe there is a way to achieve what you asked (even if I have some doubts because how to map Material UI props to be accepted by another component that has different props?)
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
I'm using Vala with GTK+ and now I'm trying to add custom CSS to specified widget.
I can add fe. backgroudn to GtkWidget but not for #sidebar
#sidebar { //It doesn't work
color: white;
}
GtkWindow { // It works
background-color: red;
}
I'm adding class to widget like that:
sidebar = new Gtk.Label("Hello");
sidebar.set_name("sidebar");
And it's changes color to GtkWindow, but not for this label.
Any ideas?
I haven't programmed in Vala, but you should add class to StyleContext.
This is in C
sidebar = gtk_label_new ("Hello');
gtk_style_context_add_class ( gtk_widget_get_style_context ("mysidebar"), sidebar);
Also, style "sidebar", is already defined in GtkStyle. You should change the "sidebar" in CSS into something else (sidebar is used by views, toolbar etc)
But if you persist, the syntax should be:
.mysidebar {
#anything
}
I've been looking for hours to find a plugin that would add somthing like "padding: 5px" to an image. Does everyone do this through plain html? Our customer need a way to add this simply with the use of a button or right click context menu. Any suggestions/solutions or do I have to develop this myself?
Suggestions concerning other products than TinyMCE is not necessary.
The easiest to use is to add a custom stylesheet which only need to be set as a parameter (content_css). Example code snippet for the tinymce configuration:
...
theme: 'advanced',
content_css: "http://my_server/my_css/my_custom_css_file.css",
...
This css should contain something like the following
img {
padding-left: 5px;
}
The code for the tinymce button is a bit more complex (but if wised i can post it as well) and the css gets set using the following
$(ed.get('my_editor_id').getBody()).find('img').css('padding-left','5px');
UPDATE: Button code:
tinyMCE.init({
...
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
ed.addButton ('wrap_div', {
'title' : 'my title',
'image' : 'my_image.png',
'onclick' : function () {
ed.getBody().find('img').css('padding-left','5px');
}
});
});
}
});