Currently, my application utilizes in-file styling (ie. styled) from MUI to customize components while incorporating MUI theming. However, I'd like to move my CSS customizations to an external CSS stylesheet and import that, rather having all HTML and CSS in one file. Is this possible? I haven't found any way to do this yet.
For example, a custom component could be:
const ProfileWrapper = styled('div')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
padding: theme.spacing(0, 3),
boxShadow: theme.customShadows.z8,
[theme.breakpoints.up('md')]: {
padding: theme.spacing(0, 5)
}
}));
However, I'm not sure how one would do [theme.breakpoints.up('md')] in a .css file and import it and use it as a class name for components.
This is not possible as theme is a React element not css.
See here for all the ways you can organise styling in MUI https://mui.com/material-ui/customization/how-to-customize/
I personally keep all my styled-components in a separate file.
Related
I am using tinymce with react.
Color used with the "placeholder" feature is dark.
I would like to change the color in order to have a consistent form
I checked the documentation and I did not found a solution for that.
How could we change the color of the placeholder ?
The CSS that controls the placeholder text is located in the TinyMCE skin. You can override it by supplying alternative CSS via the content_css or content_style configuration options.
The CSS you need to override is:
.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
color: rgba(34,47,62,.7);
}
You could do that via content_style directly in your configuration via simple CSS like this:
.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
color: red;
}
Here is a working fiddle: https://fiddle.tiny.cloud/Oyhaab
On the Customized tabs section of the documentation we see it defining a component AntTab with the withStyles api:
const AntTabs = withStyles({
root: {
borderBottom: '1px solid #e8e8e8',
},
indicator: {
backgroundColor: '#1890ff',
},
})(Tabs);
But the indicator class rule is not listed on Tab CSS api (and I don't seem to find the class in the source code as well)
So my question is: How is material-ui able to understand this CSS rule? What am I missing?
I figured it out myself.
I was looking at the wrong api. It should be the Tabs CSS Api
I am facing this wierd situation with GWT where styles are not picked up from the CSS file correctly.
I am trying to style a text area. I know that it picks up default styles from either clean.css or standard.css.
But i have removed the inherit line from the application.gwt.xml file and copied all those styles into my own custom stylesheet file - application.css
And i am trying to add this style name ("close" see below) to my textarea like this
TextArea ta = new TextArea();
ta.addStylename("close");
But it is not picking up the class name "close" at all. I have the default styles for text area copied into application.css from standard.css.
I checked the page using firebug and chrome's inspect element, i could see see the element as this -
<textarea class="gwt-TextArea close"></textarea>
I see styles only being picked up from class - gwt-TextArea.
could someone help me out here.
//// styles in application.css
.close {
font-size:150%;
}
.gwt-TextArea {
border: 1px solid #d9dbdb;
background: #ffffff;
color: #8e8e8e;
font: Arial, sans-serif;
overflow: auto;
}
What you are looking for is the setStyleName(), which will add a style name to the object.
After doing that you can use .close { } like you are using now.
What addStyleName does is it creates another style wich is dependent on the main style name in this case .gwt-TextArea close{ } (I'm not 100% sure of this, the documentation isn't very clear).
Anyways it's a good habit to use setStyleName() and setStylePrimaryName().
btw. if you like the answer please click on the button on the left side of the post so it's marked as answered :)
In GWT, styles are obfuscated by default, so you can reuse style names across your different widgets.
You have to use a special CSS class mapping to use styles programmatically : the CssResource.
interface MyCssResource extends CssResource {
String myCssClass();
}
class MyResources extends ClientBundle {
#Source("my.css")
MyCssResource css();
#Source("some.png")
ImageResource imageAccessor();
#Source("some.png")
#ImageOptions(repeatStyle=RepeatStyle.Horizontal)
ImageResource repeatingImage();
}
You then use this clientbundle via GWT deferred binding.
See here for more information :
http://code.google.com/intl/fr-FR/webtoolkit/doc/latest/DevGuideClientBundle.html#CssResource
Thanks guys for helping out. But I figured out that my css file had a syntax error somewhere in the middle of the file and hence all the styles written below that error were not picked up.
That was a tough thing .. because i was all the time wondering if I was doing anything wrong in the way I am handling styling through GWT.
I am writing a GWT application in which everything on the screen is in some widget or other, i.e. there's nothing there from the HTML file in ordinary HTML.
I would like all the text to appear in a certain Google web font. My question is, how to apply the font to the widgets in some kind of automatic way? If I put the font-family CSS in the body{}, none of the widgets picks up the font, but ordinary HTML does (and, like I say, there isn't any of that).
On the other hand, I want to avoid this kind of thing, which is what I've got at the moment, in my stylesheet:
.gwt-Label, .gwt-TextBox, .gwt-Button, .gwt-DialogBox .Caption, .gwt-EveryOtherKindOfWidget....
{
font-family: Quattrocento, serif;
}
So my question is, how can I get everything to inherit this font? I feel I must be missing something fairly fundamental here. Can anyone help?
Thanks
Neil
So there are a couple of issues here:
The default GWT theme (standard) includes the standard.css file. This file contains style definitions for all widgets. The theme is defined in your module's xml file:
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
There are different ways on how to override widget styles:
copy the standard.css file, include it as a CSSResource in a ClientBundle in your app and remove the inherit line from your module's xml file.
add your stylesheet which overrides the widget styles defined in the standard.css after the inherit line in your module's xml file (see here for more details)
i.e:
<inherits name='com.google.gwt.user.theme.standard.Standard' />
<stylesheet src="CustomStylesheet.css" />
Looking at the standard.css stylesheet you will see that the widgets don't define any fonts. It is actually inherited from the body style.
excerpt from the standard.css:
body, table td, select {
font-family: Arial Unicode MS,Arial,sans-serif;
font-size: small;
}
So you probably only have to override the body part in your custom stylesheet with the google fonts and all widgets will inherit it.
Here comes the second issue: Loading the google fonts isn't that easy because of stylesheet precedence/inheritance.
This wiki describes how to load the google fonts into your GWT app.
How do you change the default font type and font size in TinyMCE?
I'm using the advanced skin and I've changed the body, td, pre style in default/content.css but it still doesn't change.
Well, there are several content.css and only one is used to style your editor depending on your configuration settings.
You should use the content_css configuration option and name an own css file where you can overwrite the editors defaults (the content.css you were recently looking for). In your init function use something like
content_css: "http://localhost/css/my_tiny_styles.css",
and in my_tiny_styles.css or whatever file you choose you use
font-family: myfont1, myfont2, sans-serif;
Here's another way to resolve this problem.
By adding your own custom styles into our CSS file by defining tinymce id.
#tinymce .mceContentBody p {
font-family: your_font_name !important;
}
If you want to change the default of the dropboxes rather than the display css only, with tinyMCE 4 it is now:
setup : function(ed) {
ed.on('init', function(ed) {
ed.target.editorCommands.execCommand("fontName", false, "Calibri");
ed.target.editorCommands.execCommand("fontSize", false, "11pt");
});
}
EDIT:
this is the setup option of the init function as explained here:
https://www.tinymce.com/docs/configure/integration-and-setup/#setup
For people having troubles adding a stylesheet because of path troubles or whatever reason, this should do it pretty simple:
setup : function(ed) {
ed.on('init', function(){
$(this.getDoc()).find('head').append('<style>p{margin:0;}</style>');
});
}
Note I used jQuery, but can of course be done without it as well.
Here's how to do it without touching CSS or any other codes.
Use the plugin 'TinyMCE Advanced'
Activate it in settings.
More detailed instructions here.