Im trying to override Material UI's default styles to make each TableRow have a margin between each other. However, it seems as if the override is not going through to the user interface.
overrides is a Theme setting, not a styling setting.
If you wish to set margins for ALL table rows to 30px (note. I would also suggest setting it to theme.padding(3.75) rather than explicitly defining it as 30px), then you should define it as an override in your Theme (see the documentation on globals).
If you only want to set the margins to 30px for a specific table then you can just use a regular CSS class.
Related
I am trying to access the scrollbar styling in the antD Select component. I have found where to style the scrollbar but it is not functional. Meaning, it shows up when I remove the diplay: none from the style and change the color, but it doesn't scroll. Am I doing something wrong. In order to change the style I am doing something like this...
Also, I found a way to add a functional scrollbar using this code...
.ant-select-dropdown{
overflow: auto;
}
But this does not allow me to style the dropdown scrollbar. Instead I have to style it using the webkit which styles this everywhere and I cannot get it to fit exactly in the dropwdown. I was hoping to use the antD one, as it looks nicer, but it doesn't function for some reason. Any idea how to get this to work?
I found the solution here by setting this on the select element.
I am using TinyMCE 5 for my React project. I want to customize the editor and I want to do things like for eg: editing border property or adding box shadow to toolbar. I tried adding css using content_css property but it isn't working. Is there any other work around for it?
edit:
Here's how I want it to look like in the end
here
I was able to add custom icons. Only problem I'm facing is modifying the css. I want to bring the toolbar down, add shadow effect, make icons little smaller and reduce the width of the toolbar. I also tried using styled-components to override CSS but it didn't work. Is there any alternative to override CSS?
You can bring the toolbar down using toolbar_location: "bottom".
Regarding CSS, you can override the default CSS with your own styles using content_css. For example:
content_css: "/mycontent.css";
Or you can override specific parts of it using content_style. For example:
content_style: "body { font-family: Arial; }";
Also see:
Customizing the TinyMCE toolbar
content_css & content_style
I need to dynamically style the draftjs editor container (basically I need to dynamically apply font sizes to the container, as the font sizes are in percentages). Normally, dynamic styling in react is done by applying styles to the component, but for draftJS, styling the component itself doesn't work and you need to use css to style the .DraftEditor-editorContainerclass.
Is it possible to dynamically style the .DraftEditor-editorContainer while adhering to React principles? I could easily do the dynamic styling with jQuery, but from what I understand this is a horrible practice and should never be done. Is there no other way?
I have a filter bar for a table above the table set to become sticky at a certain height, this works great until you open the md-select options and it triggers the md-backdrop and applies inline positioning to the body and moves everything but the fixed positioned filter bar.
Is there anyway to disable the inline positioning that gets applied to <body> when the select options dropdown opens?
Thanks.
Just prevent body from ever getting set to anything other than what you want it to be with display:block !important or display:flex !important. Whatever you want really, it will override the inline css that angular material's javascript applies.
How to change style of Scrollbar in Select Control in HTML?
You cannot set styles to the system elements. They look different in different bowsers and OSs. And you cannot do anything dirctly with them. But you could use some jQuery plugins to replace system elements. check this