diff --git a/src/StyleWrapper/StyleWrapperView.jsx b/src/StyleWrapper/StyleWrapperView.jsx index 6eeeef3..a94c132 100644 --- a/src/StyleWrapper/StyleWrapperView.jsx +++ b/src/StyleWrapper/StyleWrapperView.jsx @@ -2,12 +2,12 @@ import React from 'react'; import cx from 'classnames'; import { settings } from '~/config'; -export function getStyles(data) { +export function getInlineStyles(data) { return { - backgroundColor: data.backgroundColor, - color: data.textColor, - textAlign: data.textAlign, - fontSize: data.fontSize, + ...(data.backgroundColor ? { backgroundColor: data.backgroundColor } : {}), + ...(data.textColor ? { color: data.textColor } : {}), + ...(data.textAlign ? { textAlign: data.textAlign } : {}), + ...(data.fontSize ? { fontSize: data.fontSize } : {}), // fill in more }; } @@ -21,23 +21,35 @@ export default (props) => { const { data = {}, children } = props; const { style_name, align, size } = data; const style = getStyle(style_name); + const inlineStyles = getInlineStyles(data); const ViewComponentWrapper = style?.viewComponent; - return ( -
-
- {ViewComponentWrapper ? : children} -
+ return Object.keys(inlineStyles).length > 0 || style || align || size ? ( +
+ {size ? ( +
+ {ViewComponentWrapper ? ( + + ) : ( + children + )} +
+ ) : ViewComponentWrapper ? ( + + ) : ( + children + )}
+ ) : ViewComponentWrapper ? ( + + ) : ( + children ); };