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
Related
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.
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
I've just upgraded my TinyMCE to version 4, which seems to have a tooltip by default.
How can I disable/hide the tooltip that appears on mouse-over on any tool-bar item?
I've been searching for any possible solution, but so far, I have found nothing in the official documentation. What I found in the development tinymce.js file (uncompressed version) is that tooltip is hardcoded and set to be included every time.
I tried different things to disable the tooltip, by so far, the easiest and safest way I came up with is by using CSS, include this bit of code in the main css file to hide the tooltip forever:
.mce-widget.mce-tooltip {
display: none !important;
}
This solution avoids using Javascript/jQuery, and also avoids modifying the source file tinymce.js.
I fiddled around and found a dynamic solution using JQuery and tinyMCE 4.x. This solution allows you to enable/disable tooltips inside tinyMCE:
tinymce.init({
...
init_instance_callback : function() {
$("head").append("<style> .mce-tooltip{ display: none; } </style>");
},
...
It does change the class mce-tooltip after tinyMCE is initialised (init_instance_callback). Set 'display: block;' if you want to display the tooltips again. Its not the nicest solution, I know, but it works.
You can access the button instance and set its rendered state to false:
var controlIds = editor.theme.panel.rootControl.controlIdLookup;
for (let i in controlIds) {
if (controlIds[i].tooltip) {
controlIds[i].tooltip().state.set('rendered', false);
}
}
Is there a way to style Tooltips in Google chart API? I've managed to only change the color of text using tooltip.textStyle. So is there any solution to change the white background to some other color (as shown on picture):
Test playground http://jsfiddle.net/nyNAg/
I found a solution through serendipity:
<style>
path {
fill: yellow;
}
</style>
Anyway, I did not find any configuration option for background in the google charts API.
Enable the tooltip to be handled by the HTML by writing this code in your options of google charts
CODE: tooltip: { isHtml: true } (,) add a comma if needed. :)
Now you can style tooltip using HTML and css. :)
/CSS Styling/
To style the tooltip box :
div.google-visualization-tooltip {}
To style the content like font size, color, etc
div.google-visualization-tooltip > ul > li > span {}
Use !important whenever needed ;)
http://jsfiddle.net/nyNAg/66/
It's possible to completely replace the label with custom HTML. It's maybe a bit complicated, but gives you full control of the content and style. See https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content
As the Google Chart Tools API implements its SVG charts via an iframe hosted on it's servers, as per the Same Origin Policy you may not access or modify the content of another domain, unless via server-side manipulation prior to sending the client a response.
Given that, I'm not sure how you managed to change the text colour - perhaps a browser bug?
Another option might be to override inline-style rules e.g.
li.google-visualization-tooltip-item span[style] { font-weight: normal !important; }
http://css-tricks.com/override-inline-styles-with-css/
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.