Mdx-deck: Styling inside components

[JJ]

I have used the background image like this:

<Image src='https://farm5.staticflickr.com/4810/31993107578_77df74653c_k_d.jpg' alt='comenzando' />

# That's me!

After importing the component. The image is OK, but I can't seem to get the text right on the page, either it's on top or on the bottom. Can it be shown centered?

[jxnblk]

Sorry, not sure I understand the question. You mention a background image, but the code shows the img tag...

[JJ]

Ah, it was Image. Sorry, stupid me.

[JJ]

I've updated it (and reopen, if you don't mind)

[jxnblk]

For the Image component, you’ll need to pass the content as children iirc

[JJ]

Thanks. It is now in the image, but the style is not the same as the rest
of the deck. I'm using h1, it gets the font right, but not the size; it's
also on the top of the page. Does it have different styling then?

[JJ]

Besides, I cant style the content using the style attribute. Is there something I'm missing here?

[JJ]

In general, how can you change styling inside a component? For instance, I would like to make the font in the full-screen code bigger. Is that possible?

[tomwayson]

It is now in the image, but the style is not the same as the rest of the deck. I'm using h1, it gets the font right, but not the size; it's also on the top of the page.

I'm having almost exactly the same issue.

For example, w/ the dark theme (so that the text will be visible over the image) and this code:

import { Image } from 'mdx-deck'

<Image src="https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20">

# Slide title
Some text
</Image>

I get this:

Note how the slide content is not centered vertically and that there is a 1em margin above the image.

Where as with:

# Slide title
Some text

I get:

How can I set the background image for a slide and have the text content be vertically centered the way it would otherwise. Should I be using a custom layout instead?

[slushman]

You could apply styling to the Image component. Something like:

` src="https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20"
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}

`

That seems to work for me. Not sure why that wouldn't be the default styling for this use case though.

[jxnblk]

The Image component intentionally doesn't use the same styles as the default slide layout – if you want to center items, use the method described by @slushman