Use css prop

packages/components/src/tip/index.js

@@ -1,29 +1,41 @@
+/** @jsx jsx */
+/**
+ * External dependencies
+ */
+import { jsx } from '@emotion/core';
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { SVG, Path } from '@wordpress/primitives';
+
 /**
  * Internal dependencies
  */
-import { StyledTip } from './styles/tip-styles';
+import { tipStyles, iconStyles, contentStyles } from './styles/tip-styles';
 
 /**
  * @typedef Props
+ * @property {string} [className] Optional classname to add to the tip.
  * @property {import('react').ReactNode} children Children to render in the tip.
  */
 
 /**
  * @param {Props} props
  * @return {JSX.Element} Element
  */
-function Tip( props ) {
+function Tip( { children, className } ) {
 	return (
-		<StyledTip className="components-tip">
-			<SVG width="24" height="24" viewBox="0 0 24 24">
+		<div
+			className={ classnames( 'components-tip', className ) }
+			css={ tipStyles }
+		>
+			<SVG css={ iconStyles } width="24" height="24" viewBox="0 0 24 24">
 				<Path d="M12 15.8c-3.7 0-6.8-3-6.8-6.8s3-6.8 6.8-6.8c3.7 0 6.8 3 6.8 6.8s-3.1 6.8-6.8 6.8zm0-12C9.1 3.8 6.8 6.1 6.8 9s2.4 5.2 5.2 5.2c2.9 0 5.2-2.4 5.2-5.2S14.9 3.8 12 3.8zM8 17.5h8V19H8zM10 20.5h4V22h-4z" />
 			</SVG>
-			<p>{ props.children }</p>
-		</StyledTip>
+			<p css={ contentStyles }>{ children }</p>
+		</div>
 	);
 }
 

packages/components/src/tip/styles/tip-styles.js

@@ -1,25 +1,25 @@
 /**
  * External dependencies
  */
-import styled from '@emotion/styled';
+import { css } from '@emotion/core';
 
 /**
  * Internal dependencies
  */
 import { color, space, rtl } from '../../utils';
 
-export const StyledTip = styled.div`
+export const tipStyles = css`
 	display: flex;
 	color: ${ color( 'mediumGray.text' ) };
+`;
 
-	svg {
-		align-self: center;
-		fill: ${ color( 'alert.yellow' ) };
-		flex-shrink: 0;
-		${ rtl( { marginRight: space( 2 ) } ) }
-	}
+export const iconStyles = css`
+	align-self: center;
+	fill: ${ color( 'alert.yellow' ) };
+	flex-shrink: 0;
+	${ rtl( { marginRight: space( 2 ) } )() }
+`;
 
-	p {
-		margin: 0;
-	}
+export const contentStyles = css`
+	margin: 0;
 `;