we’re gonna explore the theme object
eventually in more detail but for now
what I’d like to show you is how we can
move on from inline styling to the more
advanced with style hoc and in fact to
do that let’s actually start by fixing
some of the issues that one of you
promptly pointed out so we actually have
problems with responsiveness in the
application and close up all the other
tabs as well I’m going to open up the
console and it want to open up the
emulator so as you can see here it
doesn’t really look very nice on mobile
devices and in order to fix that we can
go back to our index js4 the exercise
component what I’m going to do is I’m
actually going to change some of the
grid items here first of all on small
devices we want to make sure that we
have twelve columns and then on small
devices as well as medium large and
extra-large we’re actually gonna have
six columns only so I’m gonna copy that
and I’m gonna paste it into the other
grid item as well and let’s save that
and let’s see if that changes anything
it looks much better right now and let’s
actually switch to a different tab and
that’s what it’s gonna look like and now
we don’t have that ugly misplacement
issue but it will still have an issue
with the tabs so there’s a few things we
can do here let’s go to the footer
component and we have a centered
property in fact what I’m gonna do is
let’s go to material UI next we’re gonna
go to the documentation let’s explore
some of the features that the tabs
provides I’m going to go to tabs and if
you scroll down you’re actually going to
find a section for scrollable tabs so
what’s happening here is we have a
scrollable property on the tabs if I
copy that property and I’m just gonna
paste it in over here I’m gonna save it
let’s go back to the mobile device as
you can see here it looks a little bit
better because we now can actually
scroll the elements over there and we
can actually see all of them but we do
get a warning though because it says
that we cannot use a centered property
set to true together with the scrollable
property also set to true and that’s
actually one of the limitations of the
tabs component and it’s a known
limitation now there is a few things
that we could do so in order to
alleviate that
let’s actually import with width helper
method from material material let’s see
you I slash utils slash with what what
that helper method is gonna do is it’s
actually gonna allow us to have a width
property injected into the component but
the only thing we need to do of course
is we need to wrap it with that method
okay and then we also need to pass it
down so I’m going to wrap all of that
with parentheses so it’s just going to
be used in the same fashion as a
higher-order component just like with
styles it’s basically the same thing so
I’m going to save the file let’s
actually console.log the property so
let’s do console.log width okay I’m
gonna save that let’s go to the console
and I’m actually going to open it up
over here and as you can see here we
have a excess value which refers to the
extra small device or basically the
mobile device that’s what it means
so remove the console.log and for the
centered property I’ll have a condition
so I’m gonna say if the width is extra
small in fact we’re going to say if it’s
not extra small then the value would be
true and then in that case we actually
want to make them centered but for
scrollable properties well when we want
to make them scrollable on mobile
devices because the width is too small
and so you they can’t see the user can’t
see all of the tabs so this one I’ll
change to three equal signs and of
course you could keep them as two in
this case it’s not gonna affect anything
but the idea like I said we want to keep
them centered on medium basically on
small medium large and extra-large
devices but we also want to make them
scrollable on extra small devices only
so I’ll save that and let’s go over here
refresh the page and as you can see once
it loads what’s actually scroll down we
could basically move between the tabs
and we can see all of them at once and
the other thing you could also do is you
could also add scroll buttons the way
you would do that is you set the scroll
buttons property to on
it’s Auto and in that case you’re gonna
see these coal buttons if you’d like to
experiment of course go ahead and see if
the styling fits your needs and if you
do like the way it looks so I’m gonna
move on to something else in this case
we still have an issue with the form as
you can see we have a fixed width which
doesn’t really work on mobile devices so
there’s a few things we can do first of
all let’s remove the console.log
statement these simplest fix we could do
is we can reset the width to something
different let’s say 250 pixels and if we
save that it’s already gonna fix the
form for us okay let’s see how it looks
like an iPad for example if we look at
the form it’s kind of small and it’s
actually pretty small and mobile on
desktop devices as well so we could
technically have two separate classes so
we might have an extra small form
control right and we can have the width
set to 250 and for example by default we
might have 300 or we might actually have
more than that so it depends we might
have different classes for different
different width basically so it’s
something that you could do it’s pretty
much the same approach as we used in a
footer we had to use the width with
higher order components so if you want
to go with that approach you’re more
than welcome to do so for now I guess
I’m just gonna keep it as 250 because I
think it’s just fine for now but if you
like to customize it more for your needs
quiet and the other cool thing we could
do is we could also go back to our app
component there’s actually an
interesting baseline component that
module UI provides and if you go to
layout actually it’s in style.css
baseline what this one does it basically
applies a consistent layout to all of
your pages because you might know that
in your applications and actually if you
look at this one you can already see a
weird margin appearing around your
elements in fact I think it’s set on the
body the recall the body has a margin of
eight by default in different browsers
will apply different default styles to
your elements depending on what specific
browser it is so in order to alleviate
those inconsistencies between the
browsers
machole UI provides a functionality or
utility components known as CSS baseline
it allows you to basically start your
application with a clean slave and it’s
going to look pretty much consistent on
all of the browsers so it’s something I
like to use as well so I’m going to
import it as well at the top of the app
component let’s import it right after
react let’s have our CSS baseline and
I’m gonna put it in here right after the
fragments so let’s have our CSS baseline
and as you can see here it fixes the
margin the other thing we could do is we
could go back to our index J s file at
this point we could say if we remove the
margin bottom let’s remove the margin
button for now and let’s go remove that
margin between the footer and between
the two panes we could do the same thing
for margin top so I’d like to keep it as
five pixels for now like to have a small
space in between so we can see the
shadow so I’m gonna keep it like that
and I think it looks pretty good right
so in closing we kind of touched on
styling in this video what I’d like to
point out is that for simple components
for simple styling it’s perfectly fine
to use inline Styles and in fact inline
styles are available in react
out-of-the-box like I said so you don’t
need to rely on any other helpers or any
other how our components anything like
that you could basically use these
Styles out-of-the-box without actually
any other dependencies so these Styles
the inline Styles are basically objects
that contain key value pairs in which
you basically define your CSS and this
gets converted to inline Styles on the
actual elements so in fact I’m going to
show you over here in our application if
I find the Left pane let’s say you can
see that the left pane has inline Styles
these are the inline Styles I was
talking about so it actually injects
that javascript object from here to the
paper element it injects those Styles
into the actual Dom element so let’s see
how this is gonna look like with the
with Styles helpers so what I’ll do is
I’m gonna import with styles from
material UI / styles okay
and we’re gonna convert the styles to a
function that accepts a theme object and
returns another object as well which
would basically contain the paper
element and it fits that imports dipole
and what we need to do in the end is we
need to have a with styles call we have
to pass these styles object in it and
then also we have to wrap this with the
brackets as well so I’m going to fix the
indentation really quickly and then
finally we’re missing a closing
parenthesis at the end so that’s gonna
fix that let’s also have classes at the
top so I’ll have the classes property
and then finally we can no longer access
styles like that so let me find these
styles over here this has to change to
classes dot paper so we’re basically
referencing this paper element from the
Styles function over here and then we
have to do the same thing for the left
pane as well so classes dot paper and
then finally instead of using style we
have to change that to class name so
this is going to be a dynamically
generated class name as you’re gonna see
in a second so once I save the file
let’s go back to our application here
and let’s see what the left pane looks
like now so the left pane has a class
now in this class is being generated in
the local environment and that’s why it
has an extended form in production
applications it would typically be
something even more contrived than that
so this is the coolest of class names
and as you can see here we don’t get any
inline injected styles at all but we do
have embedded styles though and if you
scroll up to the head element over here
in the HTML you could see a bunch of
different styles that are being injected
so for example most of them are actually
coming from a chill UI so what happens
is when we actually use one of the
components let’s say a paper component
the paper component is an independent
component it doesn’t depend on other
components so you could actually use it
in isolation so when you import that
component at the top so we import it
from a chill UI here’s a paper component
and we actually use that component
inside of our application what happens
is mature UI will inject
Styles for that component inside of the
head section so that’s why you see
embedded styling over here if you expand
it you’re gonna see the movie paper
class and we basically have different
styles for different components but if
you scroll to the very bottom you can
see our component over here and that’s
our class the component paper that we
created so we called it paper and of
course the name was also customized
because all the names are dynamic but we
can basically see the four styles the
height padding margin top as well as
overflow why property that we define in
the styles object or actually function
over here so that’s basically what
happens now the added bonus is that we
can actually create media queries we
could define more advanced CSS and it
turns out there are a lot of different
reasons why this approach is actually
more efficient and in the next video
we’re actually going to take a closer
look at the theme so we’re actually
gonna explore the theme object the theme
object as you gonna see contains a lot
of configuration variables which you are
able to customize for your application
and in fact you could create different
themes that could be updated dynamically
on the fly and that’s really just one of
the cool features of theming the last
thing I’ll mention is I also purchased a
new microphone so I hope you could
appreciate a better sound I mean know
how that works
and I’m gonna see you in the next video
thanks for watching and I’ll see you next time
eventually in more detail but for now
what I’d like to show you is how we can
move on from inline styling to the more
advanced with style hoc and in fact to
do that let’s actually start by fixing
some of the issues that one of you
promptly pointed out so we actually have
problems with responsiveness in the
application and close up all the other
tabs as well I’m going to open up the
console and it want to open up the
emulator so as you can see here it
doesn’t really look very nice on mobile
devices and in order to fix that we can
go back to our index js4 the exercise
component what I’m going to do is I’m
actually going to change some of the
grid items here first of all on small
devices we want to make sure that we
have twelve columns and then on small
devices as well as medium large and
extra-large we’re actually gonna have
six columns only so I’m gonna copy that
and I’m gonna paste it into the other
grid item as well and let’s save that
and let’s see if that changes anything
it looks much better right now and let’s
actually switch to a different tab and
that’s what it’s gonna look like and now
we don’t have that ugly misplacement
issue but it will still have an issue
with the tabs so there’s a few things we
can do here let’s go to the footer
component and we have a centered
property in fact what I’m gonna do is
let’s go to material UI next we’re gonna
go to the documentation let’s explore
some of the features that the tabs
provides I’m going to go to tabs and if
you scroll down you’re actually going to
find a section for scrollable tabs so
what’s happening here is we have a
scrollable property on the tabs if I
copy that property and I’m just gonna
paste it in over here I’m gonna save it
let’s go back to the mobile device as
you can see here it looks a little bit
better because we now can actually
scroll the elements over there and we
can actually see all of them but we do
get a warning though because it says
that we cannot use a centered property
set to true together with the scrollable
property also set to true and that’s
actually one of the limitations of the
tabs component and it’s a known
limitation now there is a few things
that we could do so in order to
alleviate that
let’s actually import with width helper
method from material material let’s see
you I slash utils slash with what what
that helper method is gonna do is it’s
actually gonna allow us to have a width
property injected into the component but
the only thing we need to do of course
is we need to wrap it with that method
okay and then we also need to pass it
down so I’m going to wrap all of that
with parentheses so it’s just going to
be used in the same fashion as a
higher-order component just like with
styles it’s basically the same thing so
I’m going to save the file let’s
actually console.log the property so
let’s do console.log width okay I’m
gonna save that let’s go to the console
and I’m actually going to open it up
over here and as you can see here we
have a excess value which refers to the
extra small device or basically the
mobile device that’s what it means
so remove the console.log and for the
centered property I’ll have a condition
so I’m gonna say if the width is extra
small in fact we’re going to say if it’s
not extra small then the value would be
true and then in that case we actually
want to make them centered but for
scrollable properties well when we want
to make them scrollable on mobile
devices because the width is too small
and so you they can’t see the user can’t
see all of the tabs so this one I’ll
change to three equal signs and of
course you could keep them as two in
this case it’s not gonna affect anything
but the idea like I said we want to keep
them centered on medium basically on
small medium large and extra-large
devices but we also want to make them
scrollable on extra small devices only
so I’ll save that and let’s go over here
refresh the page and as you can see once
it loads what’s actually scroll down we
could basically move between the tabs
and we can see all of them at once and
the other thing you could also do is you
could also add scroll buttons the way
you would do that is you set the scroll
buttons property to on
it’s Auto and in that case you’re gonna
see these coal buttons if you’d like to
experiment of course go ahead and see if
the styling fits your needs and if you
do like the way it looks so I’m gonna
move on to something else in this case
we still have an issue with the form as
you can see we have a fixed width which
doesn’t really work on mobile devices so
there’s a few things we can do first of
all let’s remove the console.log
statement these simplest fix we could do
is we can reset the width to something
different let’s say 250 pixels and if we
save that it’s already gonna fix the
form for us okay let’s see how it looks
like an iPad for example if we look at
the form it’s kind of small and it’s
actually pretty small and mobile on
desktop devices as well so we could
technically have two separate classes so
we might have an extra small form
control right and we can have the width
set to 250 and for example by default we
might have 300 or we might actually have
more than that so it depends we might
have different classes for different
different width basically so it’s
something that you could do it’s pretty
much the same approach as we used in a
footer we had to use the width with
higher order components so if you want
to go with that approach you’re more
than welcome to do so for now I guess
I’m just gonna keep it as 250 because I
think it’s just fine for now but if you
like to customize it more for your needs
quiet and the other cool thing we could
do is we could also go back to our app
component there’s actually an
interesting baseline component that
module UI provides and if you go to
layout actually it’s in style.css
baseline what this one does it basically
applies a consistent layout to all of
your pages because you might know that
in your applications and actually if you
look at this one you can already see a
weird margin appearing around your
elements in fact I think it’s set on the
body the recall the body has a margin of
eight by default in different browsers
will apply different default styles to
your elements depending on what specific
browser it is so in order to alleviate
those inconsistencies between the
browsers
machole UI provides a functionality or
utility components known as CSS baseline
it allows you to basically start your
application with a clean slave and it’s
going to look pretty much consistent on
all of the browsers so it’s something I
like to use as well so I’m going to
import it as well at the top of the app
component let’s import it right after
react let’s have our CSS baseline and
I’m gonna put it in here right after the
fragments so let’s have our CSS baseline
and as you can see here it fixes the
margin the other thing we could do is we
could go back to our index J s file at
this point we could say if we remove the
margin bottom let’s remove the margin
button for now and let’s go remove that
margin between the footer and between
the two panes we could do the same thing
for margin top so I’d like to keep it as
five pixels for now like to have a small
space in between so we can see the
shadow so I’m gonna keep it like that
and I think it looks pretty good right
so in closing we kind of touched on
styling in this video what I’d like to
point out is that for simple components
for simple styling it’s perfectly fine
to use inline Styles and in fact inline
styles are available in react
out-of-the-box like I said so you don’t
need to rely on any other helpers or any
other how our components anything like
that you could basically use these
Styles out-of-the-box without actually
any other dependencies so these Styles
the inline Styles are basically objects
that contain key value pairs in which
you basically define your CSS and this
gets converted to inline Styles on the
actual elements so in fact I’m going to
show you over here in our application if
I find the Left pane let’s say you can
see that the left pane has inline Styles
these are the inline Styles I was
talking about so it actually injects
that javascript object from here to the
paper element it injects those Styles
into the actual Dom element so let’s see
how this is gonna look like with the
with Styles helpers so what I’ll do is
I’m gonna import with styles from
material UI / styles okay
and we’re gonna convert the styles to a
function that accepts a theme object and
returns another object as well which
would basically contain the paper
element and it fits that imports dipole
and what we need to do in the end is we
need to have a with styles call we have
to pass these styles object in it and
then also we have to wrap this with the
brackets as well so I’m going to fix the
indentation really quickly and then
finally we’re missing a closing
parenthesis at the end so that’s gonna
fix that let’s also have classes at the
top so I’ll have the classes property
and then finally we can no longer access
styles like that so let me find these
styles over here this has to change to
classes dot paper so we’re basically
referencing this paper element from the
Styles function over here and then we
have to do the same thing for the left
pane as well so classes dot paper and
then finally instead of using style we
have to change that to class name so
this is going to be a dynamically
generated class name as you’re gonna see
in a second so once I save the file
let’s go back to our application here
and let’s see what the left pane looks
like now so the left pane has a class
now in this class is being generated in
the local environment and that’s why it
has an extended form in production
applications it would typically be
something even more contrived than that
so this is the coolest of class names
and as you can see here we don’t get any
inline injected styles at all but we do
have embedded styles though and if you
scroll up to the head element over here
in the HTML you could see a bunch of
different styles that are being injected
so for example most of them are actually
coming from a chill UI so what happens
is when we actually use one of the
components let’s say a paper component
the paper component is an independent
component it doesn’t depend on other
components so you could actually use it
in isolation so when you import that
component at the top so we import it
from a chill UI here’s a paper component
and we actually use that component
inside of our application what happens
is mature UI will inject
Styles for that component inside of the
head section so that’s why you see
embedded styling over here if you expand
it you’re gonna see the movie paper
class and we basically have different
styles for different components but if
you scroll to the very bottom you can
see our component over here and that’s
our class the component paper that we
created so we called it paper and of
course the name was also customized
because all the names are dynamic but we
can basically see the four styles the
height padding margin top as well as
overflow why property that we define in
the styles object or actually function
over here so that’s basically what
happens now the added bonus is that we
can actually create media queries we
could define more advanced CSS and it
turns out there are a lot of different
reasons why this approach is actually
more efficient and in the next video
we’re actually going to take a closer
look at the theme so we’re actually
gonna explore the theme object the theme
object as you gonna see contains a lot
of configuration variables which you are
able to customize for your application
and in fact you could create different
themes that could be updated dynamically
on the fly and that’s really just one of
the cool features of theming the last
thing I’ll mention is I also purchased a
new microphone so I hope you could
appreciate a better sound I mean know
how that works
and I’m gonna see you in the next video
thanks for watching and I’ll see you next time
Please follow and like us: