I'm using makeStyles for adding my own styles on top of MUI components. I found out in the header, there are a massive amount of empty <style data-jss data-meta="makeStyles">. I wonder where I am doing it wrong.
Related
I have a custom component and would like to apply the exact same styles as the <Typography> component gets when setting the noWrap prop. The following does work:
<span className="MuiTypography-noWrap">
But there's of course no actual type-checking or "link" to anything here, which means if the name ever changes or is removed in a future version, I won't get any type/build error from it.
Is there a "Material UI way" to reuse/copy these classes? E.g. is there somewhere I can import/access these names from?
I assume you have a reason, but given your example of a span element, I can't help but wonder why you're not just using the MUI component.
I've never done this before, but I was curious and the styles are indeed exported. Not sure if this is a good idea or if there is another way...
import { styles } from '#material-ui/core/Typography/Typography';
const noWrapStyles = styles(theme).noWrap;
When I create a "dumb" html element within a MUI component, for instance:
<Dialog>
<p>I'm just a simple p</p>
<div>I'm just a simple div</div>
</Dialog>
it doesn't apply the font of the style. It does work for some MUI elements (eg labels), but not others (Box) and not on dumb html elements either
Is it possible to configure MUI to apply the typography defined in the theme to every dom element?
I'm curious if it's possible to nest blockquote in draft js? At the moment I'm using convertFromHTML to convert a series of nested blockquote tags into ContentState but it seems only the first blockquote is being counted.
Thanks!
You can nest inline styles but you might have to provide your own blockRenderMap to do so. Check out the LaTex example, and draft-js-plugins
In draft js the blockquote is a BlockType and block cannot nest block so you cannot approach it.
But you can use custom inline-style or custom block to simulate it. Inline style can nest and you can make some text display: 'block'; borderLeft: 2px solid #ccc; through draft js decorator. And you can create a react component that can receive a tree like data and render as a nested blockquote, use it as a custom block will also approach your goal.
Blockquote is block type element in HTML, generally block don't nest block element so I wonder what content need nest blockquote?
When buliding jasper reports JRXML files I want to be able to have a row of dynamically width'd text boxes of mixing styles. It does not seem like Jasper supports that so I'm stuck with this:
Notice how I used two static text boxes for this display with fixed widths. This is because I cannot mix the bold + normal font styles inside a component.
I would rather something like this:
Where the NOW() and $P{name} will automatically stretch out and look real nice.
Note: I cannot use the HTML component due to this issue http://community.jaspersoft.com/questions/540569/html-component-font and https://community.jaspersoft.com/jasperreports-library/issues/4411-0
Is there a way to code JRXML files with dynamically width'd Textboxes?
Actually, you can mix styles using markup in a single text box. Jasper supports (simple) HTML, RTF and a custom jasper-styling.
Check the "markup" property.
But I am not aware that you could insert artificial borders around the values when using a single textbox.
I've a rich textbox in activereports detail section. Its assigned with html dyanmicaly. That HTML includes LIST tags too(UL and LI). But the problem I cant change the spacing between each LI tags. I tried all CSS methods on the LI's style property. Like Margin, Padding , Line height. But nothing helped me to solve that issue. But I need some noticeable spacing between each LI tags on the Richtextbox..
This is an emergency requirement from my boss.
Requesting your valuable support..
Thanks in Advance..
There are list of supported HTML elements and CSS style attributes in the ActiveReports documentation. You could look through that reference and try the mentioned style attributes. I'd try the line-height, margin, and padding properties of the LI elements. Or maybe try putting a P element on one of the LI elements? If that doesn't work you should probably contact ActiveReports Support at ComponentOne.
If nothing else, you could try to get some RTF document to look the way you want (i.e. increased spacing between list items) and try importing that RTF document into ActiveReports instead.
Here's what works for me:
The paragraph tag supports the inline style attribute in an ActiveReports RichTextBox. So you can enclose each list item within open/close paragraph tags, and then use margin-top, margin-bottom in the inline paragraph style to get the line spacing how you want it.
I used style='margin-top:0;margin-bottom:5'