I'm trying to make a react-native app using expo, since expo and metro bundler are compatible with react-native-web, I get my web view and Android/IOS with almost the same code.
How can I do something like the equivalent of css :hover in there?
Since there's no css and styles are done in Javascript objects like this and later converted to html css elements?
Is there a built-in functionality for this or do I need to use a library?
const styles = StyleSheet.create({
element: {
backgroundColor: "#fff",
margin: 20,
}
})
react-native-web supports hover based events in a Pressable via the onHoverIn and onHoverOut props. You can find an example in their docs:
https://necolas.github.io/react-native-web/docs/pressable/
Related
is there any lib that can take a dom element and return a string with vanilla css, to use inside a webproject?
const styles = TailwindToStyles('<div class="bg-teal-100 m-10">Lorem ipsum</div> ')
result of styles is
.bg-teall-100 {
background-color: #e6fffa;
}
.m-10{
margin: 40px
}
gregor
I was looking for a similar tool that can convert the tailwind class to CSS. I ran into one Reddit Thread. There are various tools listed out there.
The one that is simpler and closer to what I was looking for is this app to convert the tailwind class to CSS.
Here is the GitHub link: https://github.com/Devzstudio/tailwind_to_css
Live demo: https://tailwind-to-css.vercel.app/
FOR REACT NATIVE
Thanks to this packet it is possible to copy the entire tailwind code from react project and paste it as a param of the function tailwind() which returns a react-native stylesheet object.
Here's the doc :
https://github.com/vadimdemedes/tailwind-rn
I had a similar problem and solved it by
firstly create an Iframe
mount the tailwind CDN and then insert the html string to the body
extract the generated styles from the head and use.
I released a npm package that does this, check it out here https://www.npmjs.com/package/tailwind-to-css
I'm going to set up a new project and would like to have these two packages together, but not sure, so the question is that using Tailwindcss with antdesign Is a good practice?
Does anyone have any experiences?
Each package has its own theme manager for instance for colors, typography, dark mode and so on. How do you manage theme, with tailwinds or antd or both? And why?
Both packages have Grid support, which one would you prefer?
Let's have your insights?
After some research, I found these results
Some examples that uses both libs:
https://github.com/plamworapot/next-antd-tailwindcss
https://github.com/dospolov/react-redux-saga-antd-tailwind-boilerplate
https://github.com/cunhamuril/pocs
It recommended trying to commit to only one framework
Tailwind is pretty much a design system using utility classes to make writing css easier therefore it can be pretty much used with any other ui library just make sure to disable the default styling that Tailwind inject into your default styling by disabling the preflight option in config :
module.exports = {
corePlugins: {
preflight: false,
}
}
One slight issue with using both ant-design and tailwind-css is tailwind's some of default styles will break ant-design components...
I recently came a cross an issue where ant-design image preview was not functioning correctly and the image was not centered.
expected result
image one
vs what I got when using tailwind with ant-design
image two
turns out tailwind will change default image display property from "inline-block" to "block" and breaks tailwind image preview component
I resolved my issue by reseting display property on images
img {
display: unset !important;
}
apart from this little tweaks you will be good to go using both of them
There's no problem to use Tailwind CSS and Ant Design together.
Tailwind CSS could be used to custom styling on Ant Design components.
Check this link to see an example with Next, Ant Design and Tailwind CSS:
https://github.com/plamworapot/next-antd-tailwindcss
You can use Bootstrap with ant design right? Think Tailwind same as Bootstrap. Tailwind is a CSS library you can use it with any setup and framework there no extra configurations needed. Just pass the Tailwind class names.
When it comes to theming. It's a context. Ant design will grab it's context and tailwind grab it's. We don't need to think or worry about it
Well for me I needed to use tailwind to override the default ant design css styling so what I ended up doing was adding important:true to the tailwind config object (as per tailwind docs tailwind config docs for important config)
module.exports = {
....,
important:true,
};
I know some people frown at using important (as do I) but I think this is one of the uses it was created for.
In these days i'm struggling with the conversion from a react app to a react-native app;
in this react app i used tailwind to stylize components thus i need to convert tailwind classes to inline css so that i can convert it to react native stylesheet using a tool online.
Is there a way or tool to get css from Tailwind code?
i.e.
(Tailwind code) "w-full h-full bg-black" after conversion should be (vanilla css) { width : 100%; height : 100%; background-color : black;}
Thanks in advance!
The solution to this problem is : Tailwind-rn (as Mando replied)
Thanks to this packet it is possible to copy the entire tailwind code from react project and paste it as param of the function tailwind() which returns a react-native stylesheet object.
Here's the docs :
https://github.com/vadimdemedes/tailwind-rn
This is a very specific scenario that has a very specific solution.
In a more general case (that you really want to extract the vanilla css of any HTML file using tailwindcss), there is a quick tutorial for that.
Extracting TailwindCSS from HTML
I have a simple react component it has in the JSX the property css, I understand this prop it is for styling, but it is not clear if it is a "native" css react property, or if it comes from styled-components or some other library.
Do you have an idea from which library it is if not a react one?
<div css={{color: 'red', backgroundColor:'blue'}}>Hello world!</div>;
css prop comes from styled-components library itself. It is to be used when a small bit of styling does not warrant making a component for it.
However, it is not implemented centrally in the library and functions with the help of the Babel plugin. This is why you don't need to import the function to use it.
Docs
It comes from Glamor which provides many convenient ways to style your components. One way is to use its css prop as in your example. It works exactly the same as the default style prop except it supports the entire CSS language.
Here an example:
https://github.com/threepointone/glamor/blob/master/docs/howto.md
What do you think are good ways to handle styling pseudo selectors with React inline styling? What are the gains and drawbacks?
Say you have a styles.js file for each React component. You style your component with that styles file. But then you want to do a hover effect on a button (or whatever).
One way is to have a global CSS file and handle styling pseudo selectors that way. Here, the class 'label-hover' comes from a global CSS file and styles.label comes from the components style file.
<ControlLabel style={styles.label} className='label-hover'>
Email
</ControlLabel>
Another way is to style the components based on certain conditions (that might be triggered by state or whatever). Here, if hovered state is true, use styles.button and styles.buttonHover otherwise just use styles.button.
<section
style={(hovered !== true) ?
{styles.button} :
{...styles.button, ...styles.buttonHover }>
</section>
Both approaches feels kind of hacky. If anyone has a better approach, I'd love to know. Thanks!
My advice to anyone wanting to do inline styling with React is to use Radium as well.
It supports :hover, :focus and :active pseudo-selectors with minimal effort on your part
import Radium from 'radium'
const style = {
color: '#000000',
':hover': {
color: '#ffffff'
}
};
const MyComponent = () => {
return (
<section style={style}>
</section>
);
};
const MyStyledComponent = Radium(MyComponent);
Update 04/03/2018
This has been getting a few upvotes lately so I feel like I should update it as I've stopped using Radium. I'm not saying Radium isn't still good and great for doing psuedo selectors, just that it's not the only option.
There has been a large number of css-in-js libraries since Radium came out which are worth considering. My current pick of the bunch is emotion, but I encourage you to try a few out and find the one that fits you best.
emotion - 👩🎤 The Next Generation of CSS-in-JS
fela - Universal, Dynamic & High-Performance Styling in JavaScript
styled-jss - Styled Components on top of JSS
react-jss - JSS integration for React
jss - JSS is a CSS authoring tool which uses JavaScript as a host language
rockey - Stressless CSS for components using JS. Write Component Based CSS with functional mixins.
styled-components - Universal, Dynamic & High-Performance Styling in JavaScript
aphrodite - It's inline styles, but they work! Also supports styling via CSS
csx - ϟ A CSS-in-JS solution for functional CSS in functional UI components
styled-jsx - Full CSS support for JSX without compromises
glam - crazy good css in your js
glamor - css in your javascript
glamorous - React component styling solved with an elegant API, small footprint, and great performance (via glamor)
styletron - ⚡️ Universal, high-performance JavaScript styles
radium - Set of tools to manage inline styles on React elements.
aesthetic - Aesthetic is a powerful React library for styling components, whether it be CSS-in-JS using objects, importing stylesheets, or simply referencing external class names.
j2c - CSS in JS library, tiny yet featureful
(Source)
Is there a reason you're not styling the pseudo selectors with your label-hover class like this? Or am I misunderstanding your question?
.label-hover {
color: orange;
opacity: 0.5;
}
.label-hover:hover {
opacity: 1;
}
You can't style pseudo selectors with inline styling (CSS Pseudo-classes with inline styles), and I think using javascript to see if the element is hovered is an unnecessarily complicated and hackish way of doing it.